Icons

Icon Methods

Icons are installed as a CSS font, and can be applied to self-closing span or i tags without children.

<div className="d-flex justify-content-center">
  <span className="icon prism-icon-paint-can" />
</div>
<div className="d-flex justify-content-center">
  <i className="icon prism-icon-checkmark-circle" />
</div>

Icons can be added to the DOM with classnames

Or Icons can be rendered as a React component

<div className="d-flex justify-content-center">
  <Icon glyph="360-exterior" color="dark" />
</div>

Icons can also be added to the DOM via the Icon component

Or Icons can be rendered as SVGs in the DOM

<div className="d-flex justify-content-center">
  <IconSvg glyph="360-exterior" color="dark" />
</div>

Icons can also be added to the DOM as an SVG via the IconSvg component

Icon Buttons

<div className="d-flex justify-content-center">
  <Button color="secondary" className="btn btn-icon-only">
    <i className="icon prism-icon-checkmark-circle" />
  </Button>
  <Button color="secondary" className="btn btn-icon-only mx-3">
    <Icon glyph="checkmark-circle" />
  </Button>
  <Button color="secondary" className="btn btn-icon-only">
    <IconSvg glyph="checkmark-circle" color="#fff" />
  </Button>
</div>

Color, Size

Icons can be styled with text utility classes.

<div className="d-flex justify-content-center">
  <i className="icon prism-icon-checkmark-circle text-success display-4" />
  <Icon glyph="checkmark-circle" color="success" className="display-4 mx-3" />
  <IconSvg glyph="checkmark-circle" color="success" height="35px" />
</div>