Icons¶

Usage¶

Add data-icon to any element to display a Material Symbols icon:

<span data-icon="settings"></span>
<span data-icon="person"></span>
<span data-icon="home"></span>

With text¶

Icons work inline with text:

This is an informational message.

<p><span data-icon="info" aria-hidden="true"></span> This is an informational message.</p>

Accessibility¶

Decorative icons next to visible text should be hidden from assistive technology:

<span data-icon="settings" aria-hidden="true"></span> Settings

Icon-only elements need an accessible label:

<button aria-label="Settings">
  <span data-icon="settings" aria-hidden="true"></span>
</button>

Icon names¶

Browse available icons at fonts.google.com/icons.

Use the icon name in lowercase with underscores, e.g. arrow_forward, check_circle, error_outline.