Icons

Usage

We use Material Icons as our icon set. Make sure you set the aria-label describing the icon or its purpose for accessibility.

/ Plain HAML
%i.material-icons{ aria: { label: "Person" } } face

/ Rails helper
= material_icon.shape(:face).html(aria: { label: "Person" })

import React from 'react';
import { Icon } from 'n2-styles';

function myComponent(props) {
  return (
    <Icon icon="face" label="Person" />
  );
}

<i class="material-icons" aria-label="Person">face</i>

Icons with Extra Classes

= material_icon.shape(:star).css_class("blue white-text rounded-circle p-1").html(aria: { label: "Favorite" })

import React from 'react';
import { Icon } from 'n2-styles';

function myComponent(props) {
  return (
    <Icon icon="star" label="Favorite" className="blue white-text rounded-circle p-1" />
  );
}

<i class="material-icons blue white-text rounded-circle p-1" aria-label="Favorite">star</i>

Icon Toggle

= icon_toggle on_icon: "favorite", off_icon: "favorite_border"

/ You can add an optional color argument using an N2Styles::Color helper
= icon_toggle on_icon: "favorite", off_icon: "favorite_border", color: N2Styles::Color::Red.base

/ You can also add optional data attributes
= icon_toggle on_icon: "favorite", off_icon: "favorite_border", data_attrs: { data: "thing" }

import React from 'react';
import { IconToggle, color } from 'n2-styles';

function myComponent(props) {
  return (
    <IconToggle onIcon="favorite" offIcon="favorite_border" />
    <IconToggle onIcon="favorite" offIcon="favorite_border" color={color("red")} />
  );
}

<div class="icon-toggle">
  <div clas="ripple" style="background-color: #000000"></div>
  <i class="material-icons" data-on-icon="favorite" data-off-icon="favorite_border" style="color: #000000">
    favorite_border
  </i>
</div>
<div class="icon-toggle">
  <div clas="ripple" style="background-color: #F44336"></div>
  <i class="material-icons" data-on-icon="favorite" data-off-icon="favorite_border" style="color: #F44336">
    favorite_border
  </i>
</div>

There is also an accompanying javascript event you can listen for when using the Rails helper.

$(".icon-toggle").on('n2-styles:icon-toggled', function(event, detail) {
  if (detail.isOn) {
    console.log("toggled on")
  } else {
    console.log("toggled off")
  }
})