Use in HAML

To include icons in your HAML, please use the icon helper:

= icon 'arrow', 'Arrow label'

The first parameter should be the icon's name, per the icon grid above.

The second parameter is a label. This won't be rendered visibly, but will be announced by screen readers parsing the HTML output. It's only necessary when your icon is otherwise unlabeled.

You can also include an options object with an additional CSS class to be added to the icon element:

= icon 'arrow', :class => 'my-arrow'

Use in Handlebars (JavaScript templating)

A Handlebars helper is also available:

{{icon 'arrow'}}

The Handlebars helper supports two more parameters: a screen reader label (like the markdown helper), and any additional CSS classes as a string:

{{icon 'arrow' 'Arrow Label' 'my-arrow'}}

If you'd like to include an additional CSS class but don't need a screen reader label, please use an empty string as the second parameter:

{{icon 'arrow' '' 'my-arrow'}}

Sass mixins

By default, icons are sized at 40px. To change their size, please give them a special CSS class (using the helpers above) and then target that class in your Sass to specify a size using the icon-size mixin:

.my-arrow {
  @include icon-size(60px);
}