[](http://badge.fury.io/rb/material_icons) [](https://travis-ci.org/Angelmmiguel/material_icons) [](https://codeclimate.com/github/Angelmmiguel/material_icons) [](https://coveralls.io/github/Angelmmiguel/material_icons?branch=master)
# Material Icons for Rails
[Google Material Icons](https://google.github.io/material-design-icons/) is a +900 set of icons based on Material Design guidelines. With this gem you can add it easily to your Rails projects.
## Google Material Icons v2.2
Google updates Material Icons to version 2.2. It's include 41 new icons!
# Installation
To install the gem, add this line to your `Gemfile`:
gem 'material_icons'
Then, execute `bundle install`.
# CSS
In your `app/assets/stylesheets/application.css` file you need to reference material icons CSS. There are two versions: ligature or unicode (See [Compatibility](#compatibility) section for more info).
Add this line at top of `application.css` to use ligature:
```css
/*
*= 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](http://guides.rubyonrails.org/asset_pipeline.html#manifest-files-and-directives) 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 */
.md-18
.md-24
.md-36
.md-48
/* Color */
.md-dark
.md-light
/* Rotation */
.r90
.r180
.r270
.flip-horizontal
.flip-vertical
```
Don't forget to see material_icons.css.erb ;).
# Views
Google Material Icons uses a feature called ligatures. We can define the icon in the text of the HTML tag. Go to [Google Guide](https://google.github.io/material-design-icons/#using-the-icons-in-html) to get more info.
An example of icon is:
```html
face
face
```
## Helpers
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 %>
# face
<%= material_icon.face.md_36 %>
# face
# 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 %>
# 3d_rotation
# Rotation and custom css class
<%= mi.face.r90.css_class('my_class') %>
# face
```
Allowed methods are:
```
# Rotation methods
r90
r180
r270
flip_horizontal
flip_vertical
# Size methods
md_18
md_24
md_36
md_48
# Add some classes to the icon
css_class('classes')
# 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 ;).
# Slim templating engine
If you are using [Slim templating engine](http://slim-lang.com/) 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](https://github.com/rails/rails/blob/4-2-stable/actionview/lib/action_view/helpers/tag_helper.rb#L146)).
```
p.text
== material_icon.search.md_18
```
Reference [#9](https://github.com/Angelmmiguel/material_icons/issues/9)
# Compatibility
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:
```css
/*
*= 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](http://guides.rubyonrails.org/asset_pipeline.html#manifest-files-and-directives) 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:
```ruby
# Initialize material icons setup
MaterialIcons.setup do |config|
config.unicode = true
end
```
The [Helpers](#helpers) has the same syntax.
Now, the text inside of HTML tag is the CSS class! CSS Icon classes use underscores.
```html
```
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
# Tested on
Tested with [Travis CI](https://travis-ci.org/Angelmmiguel/material_icons).
Ruby versions:
* 2.2.2
* 2.1.2
* 1.9.3
Rails versions:
* 3.2
* 4.0
* 4.1
* 4.2
* master
# They are using Material icons for Rails :)
* [Materialup.com](http://www.materialup.com): a big community to share, discover and learn about Material Design.
# License
Google Material Icons are under [Creative Common Attribution 4.0 International License (CC-BY 4.0)](http://creativecommons.org/licenses/by/4.0/). But attribution [is not required](https://github.com/google/material-design-icons#license).
Material Icons gem is released under the MIT license. Copyright [@Laux_es ;)](https://twitter.com/Laux_es)