Replace outdated font awesome rails gem with drg_material_icons gem

Published on, Mar 20

I've been using FontAwesome icons since the very beginning of the DRG CMS project. It is a library of good quality icons, which has sadly not changed for the last six years. For last years they are trying to capitalize their work with Pro version, which didn't catch my attention since I didn't want DRG CMS to include any payable dependencies. When making my last project design changes, I also decided to upgrade old icons set to library, with richer set of icons. I looked around the web, and decided on Google material design icons. Icon set has a large set of close to 2000 professional looking  icons and permissive Apache 2.0. License.

 

I soon discovered material_icons Ruby gem. The problem with material_icons Ruby gem is, that it is including outdated font files and helpers which are not compatible with font-awesome-rails fa_icon helper. So I decided to use code from font-awesome-rails gem, update it a little, include the latest icon files and publish it as a new gem. I took icons names and codes found on Google material design icons repository and made a Rails generator to automatically generate CSS file for including icons into application code. The resulting gem has been published to rubygems as drg_material_icons gem. Gem's source code has been published as GitHub repository.

 

Installation

To use drg_material_icons in Rails project add this code to your Gemfile:
 

gem "drg_material_icons"

and run bundle install.

Usage

In your application.css, include the css file:
 

/*
 *= require drg_material_icons
 */


Then restart your web server if it was previously running.

 

Users of DRG CMS don't need to do anything. Code is included with drg_cms gem.

Helpers
 

drg_material_fonts gem also provides some helpers (mi_icon and mi_stacked_icon) that will help you include icons into your code.

 

mi_icon "photo_camera"
# => <i class="mi mi-photo_camera"></i>

mi_icon "photo_camera", text: "Take a photo"
# => <i class="mi mi-photo_camera">Take a photo</i>

mi_icon "chevron_right", text: "Get started", right: true
# => Get started <i class="mi mi-chevron_right mi-poll-right">Get started</i>

content_tag(:li, mi_icon("check", text: "Bulleted list item"))
# => <li><i class="mi mi-check"></i> Bulleted list item</li>

 

 

Support for spinning icons.

 

mi_icon "settings-o spin"
# => <i class="mi-o mi-settings mi-spin"></i>


 

drg_material_icons includes two material icon font types. Regular and outline. To get outline type of icons simply add -o suffix to icon name.

 

mi_icon "photo_camera-o"
# => <i class="mi-o mi-photo_camera"></i>

mi_icon "photo_camera-o", text: "Get started"
# => Get started <i class="mi-o mi-photo_camera">Get started</i>

 

There is also support for colored icons.

 

mi_icon "photo_camera red"
# => <i class="mi mi-camera_retro mi-red"></i>
# other build in options are green,blue,violet

 

Adding your own CSS keywords is as simple as adding them to your CSS files.

.mi-yellow {color: yellow}

and use them in your application.

mi_icon "photo_camera yellow"
# => <i class="mi mi-camera_retro mi-yellow"></i>

Compatibility with font-awesome-rails gem
 

drg_material_icons gem is a fork of font-awesome-rails gem and is its 100% replacement. It includes fa_icon method as an alias to mi_icon method, which is just tad updated from original font-awesome-rails project. Therefore, you can mix use of old and new variant of method call.
 

mi_icon "photo_camera"
# => <i class="mi mi-photo_camera"></i>

# or

fa_icon "photo-camera"
# => <i class="mi mi-photo_camera"></i>

Some of Material icons names are the same as FontAwesome icons, but most are not and you get blank space instead of icon image. There are two solutions to this problem. You can find font icon replacement on https://fonts.google.com/icon and update icon name in your source code, or define CSS code for the icon name in your CSS files.
 

.mi-times:before {content: '\e5cd'}

 

If you found drg_material_icons gem useful, you can give it a star on Github project page.

Comments