Awesome Open Source
Awesome Open Source

Gem Version Build Status Code Climate Codacy Badge Coverage Status Month donations

Material Icons for Rails

Material Icons for Rails

Material Design Icons is a +900 set of icons based on Material Design guidelines. You can check all the icons in the official site.

This gem helps you to add this fantastic icon collection to your Rails projects easily. I keep the gem updated so you always will have the latest icons in your project.

Google Material Icons v2.2.2

Google updates Material Icons to v2.2.2. It's include 41 new icons!


To install the gem, add this line to your Gemfile:

gem 'material_icons'

Then, execute bundle install.


In your app/assets/stylesheets/application.css.erb file you need to reference material icons CSS. There are two versions: ligature or unicode (See Compatibility section for more info).

Add this line at top of application.css to use ligature:

*= require material_icons

NOTE: Depending on the comment style of application.css, you may need to add //= require material_icons instead of the previous line. See Rails Asset Pipeline for more info.

These files provide multiple CSS classes to use in your views. Main classes are:

.material-icons, .mi

Some CSS classes are provided too:

/* Size */

/* Color */

/* Rotation */

Don't forget to see material_icons.css.erb ;).


Google Material Icons uses a feature called ligatures. We can define the icon in the text of the HTML tag. Go to Google Guide to get more info.

An example of icon is:

<i class="material-icons">face</i>
<i class="material-icons md-36">face</i>


Material Icons provide two helpers to build the HTML code of icons. The methods are material_icon and mi. These helpers use cascade style to set the icon and options. Using same example:

<%= material_icon.face %>
# <i class="material-icons">face</i>

<%= material_icon.face.md_36 %>
# <i class="material-icons md-36">face</i>

# This is a special case because the icon name starts with a number. Only
# 3d_rotation has this trouble.
<%= material_icon.three_d_rotation.md_36 %>
# <i class="material-icons md-36">3d_rotation</i>

# Rotation and custom css class
<%= mi.face.r90.css_class('my_class') %>
# <i class="material-icons r90 my_class">face</i>

# Custom css and data attributes
<%= mi.face.css_class('my_class').html(data: {id: 1}) %>
# <i data-id="1" class="material-icons my_class">face</i>

Allowed methods are:

# Rotation methods

# Size methods

# Add some classes to the icon

# Add style to the icon
style('margin-top: 5px;')

# Add some HTML attributes to an icon. This method receive a Hash
html({ data: { id: 1 } })

Remember this is a helper, you always can use HTML syntax ;).


Ligature feature requires a supported browser:

Browser Version
Google Chrome >= 11
Mozilla Firefox >= 3.5
Apple Safari >= 5
Microsoft IE >= 10
Opera >= 15
Apple MobileSafari >= iOS 4.2
Android Browser >= 3.0

To increase compatibility you can use Unicode version of the library. To set Unicode icons, you need to change the line to load ligature CSS file on app/assets/stylesheets/application.css (*= require material_icons) to this line:

*= require material_icons_unicode

NOTE: Depending on the comment style of application.css, you may need to add //= require material_icons_unicode instead of the previous line. See Rails Asset Pipeline for more info.

Next, you need to specify the helper to use unicode because it uses ligatures by default. Create an initializer file on config/initializers/material_icons.rb and set this content:

# Initialize material icons setup
MaterialIcons.setup do |config|
  config.unicode = true

The Helpers has the same syntax.

Now, the text inside of HTML tag is the CSS class! CSS Icon classes use underscores.

<i class="material-icons face"></i>
<i class="mi md-36 face"></i>
<i class="mi add_box"></i>
<i class="mi three_d_rotation"></i>

This version increase the size of the CSS file too. To see the difference, these are the size for uncompressed CSS files:

File Size
material_icons.css.erb 3 KB
material_icons_unicode.css.erb 68 KB

Common issues

Slim templating engine

If you are using Slim templating engine in your Rails application, use double equal == method to render icons or the content won't be marked as HTML safe. We are working on this issue, because we use content_tag and it sets the text as HTML safe (see ActionView::Helpers::TagHelper line 146).


Reference #9

Couldn't find file 'material_icons'

couldn't find file 'material_icons' with type 'application/javascript'

This error is related with the asset compilation of Rails. To fix it, just follow these steps:

Reference #10

Tested on

Tested with Travis CI.

Ruby versions:

  • 2.5.0
  • 2.4.3
  • 2.3.6
  • 2.2.9
  • 2.1.10

Rails versions:

  • 3.2
  • 4.0
  • 4.1
  • 4.2
  • 5.0
  • master

They are using Material icons for Rails :)

  • a big community to share, discover and learn about Material Design.
  • Easy Bills: a free tool to manage your finances.
  • your digital notebook is here. grows with your ideas and collaborates back with you.


Google Material Icons are under Apache License v2.0. We'd love attribution in your app's about screen, but it's not required.

Material Icons gem is released under the MIT license. Copyright @Laux_es ;)

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
html (11,273
css (7,435
rails (671
gem (100
rails-engine (31