Icons

Icons use Material Symbols. The default class, material-symbols, uses the outlined family. Ligature names come from the Material Symbols catalog.

The compiled stylesheet ships the outlined, rounded, and sharp variable fonts. Browsers download a family only after markup uses it, so the default outlined class does not fetch rounded or sharp. Keep dist/fonts/ next to dist/css/ so the sheet's url(../fonts/...) paths resolve. Override $expressive-include-fonts when compiling Sass if the page already loads these families.

Put material-symbols on an element and use the ligature as the text.

<span class="material-symbols" aria-hidden="true">add</span>
<span class="material-symbols-rounded" aria-hidden="true">add</span>
<span class="material-symbols-sharp" aria-hidden="true">add</span>

Icons inherit the current text color, so token utilities such as primary-text work. For icons inside buttons, see Buttons.

Style

Outlined, rounded, and sharp are font families, not variation axes. Set the icon-style attribute, which works like theme, or set --md-icon-font directly. Either one inherits, so a subtree can use a different style.

<html icon-style="rounded">
<div icon-style="sharp">…</div>
<div style="--md-icon-font: var(--md-icon-font-sharp)">…</div>

Values are outlined (default), rounded, and sharp. A single icon can still opt out with material-symbols-rounded or material-symbols-sharp.

Fill, weight, grade, optical size

Set these four variable-font axes on :root or on a wrapper. They inherit. If the Google Fonts URL has no axis range (a link without opsz,wght,FILL,GRAD@…), Google Fonts serves a static instance and the axes have no effect.

:root {
  --md-icon-fill: 0;
  --md-icon-weight: 400;
  --md-icon-grade: 0;
  --md-icon-optical-size: 24;
}

<span class="material-symbols" style="--md-icon-fill: 1; --md-icon-weight: 600" aria-hidden="true">favorite</span>

icon-filled is a shortcut for --md-icon-fill: 1.

Sizes

Size an icon with font-size, or use the preset classes on the icon: tiny (1rem), small (2rem), medium (4rem), and large (6rem). Those classes also adjust --md-icon-optical-size so the glyph is cut for that size.

<span class="material-symbols large" aria-hidden="true">insert_chart</span>