Replace outdated font awesome rails gem with drg_material_icons gem

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>

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}

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

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

# or

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

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