IRB Rocks!

# Hack your code

Material icons for Rails

Post image

Using a font icon set is a nice option for the interface of your websites and applications. These sets include a lot of icons in one file, so they usually will cover all needs of your projects.

In addition, they have more advantages:

  • Supported by all modern web browsers.
  • Customized with CSS.
  • Vector-based, they will look great at any screen.

Material Icons

Google Material Icons is a +750 set of icons based on Material Design guidelines. It's a Open Source project with ~20K of stars. Check it at:

Use them in Rails

To use this icon set in our Rails projects, I created a gem called Material Icons. This gem add the assets to your project and include a helper to build icons in the interface.

The helper provide multiple methods to set the icon, size, rotation, CSS classes... All methods are described in the README. An example:

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

Compatibility

By default Material Icons use ligatures, but this CSS3 property is only available for:

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

The gem comes with another option: Unicode. You can switch between these two modes with a simple initializer, the helper will do the rest ;).

Contribute

Fell free to add issues and fork the project to improve it.

gem share .gem