Icons

Components set --icon-size to one of these steps, never a raw font-size. The scale starts at 20px because that is the floor of the font’s optical-size axis (20–48); below it, stroke weight stops adapting and small icons read thin.

The bundled font is the full Material Symbols variable font, and every axis Google exposes is a custom property you can set at any scope: --material-symbols-fill (0 line, 1 filled), --material-symbols-weight (100–700 stroke thickness), and --material-symbols-grade (-50–200 contrast tuning). Optical size is deliberately automatic: the browser feeds the rendered size into the axis, so strokes stay even across the size scale. Dark mode already applies a -25 grade so light-on-dark glyphs do not bloom, and the icon-filled class is shorthand for the fill axis on one icon.

/* Every Google axis is a token-style hook; set them at any scope. */
:root {
  --material-symbols-fill: 1;      /* 0 line · 1 filled */
  --material-symbols-weight: 300;  /* 100-700 stroke thickness */
  --material-symbols-grade: 0;     /* -50-200 contrast tuning */
}