DAMATO
Skip to main content
  • foundations

    • Principles
    • Color
    • Typography
    • Density
  • infrastructure

    • Overview
  • library

    • Overview
    • Button
    • Delta Color
    • Fab Four
    • Liga Icon
    • Site Attribution
    • Toggle Range
    • Topic Summary
  • patterns

    • Language
    • Numbers

Liga Icon

This component leverages the Material Design icon set as a reusable web component.

In order to use the component, first find the icon you'd like to use within the reference provided by Material Design. Then use the name of the icon as the content for the component, all lowercase and replacing the spaces with underscores.

<liga-icon>view_in_ar</liga-icon>

view_in_ar

The component is called liga-icon because the icons are rendered using ligatures defined within the Material Design icon font. They are not SVG.

engineer Info

It is known that loading an entire font into the page for a few icons is not optimal for performance. This was done purely for the authoring experience at the expense of the end-user. In a more sophisticated system, it would be recommended to use an SVG-based approach which renders in-place (or better with a spritesheet to reduce DOM nodes further). It would also be important for the authoring experience to be maintained, so a replacement process would be necessary to transform a given reference into a full SVG node.