Iconography uses Phosphor Icons loaded via the
<ui-icon> custom element — one SVG fetched per glyph from
/phosphor-icons/SVGs/ and kept in the Cache API, so a glyph loaded once still
renders offline.
Phosphor publishes six weights (thin, light, regular, bold, fill, duotone); the copy vendored
here is regular — 1500+ glyphs under
/phosphor-icons/SVGs/regular/. The weight attribute names the directory
beneath that base, so <ui-icon name="gear" weight="bold"> asks for
/phosphor-icons/SVGs/bold/gear.svg — if that weight's files are missing, the request returns 404 and the icon shows the red file-x missing-glyph fallback. Add the files under
/phosphor-icons/SVGs/<weight>/ before naming a weight other than regular.
Provide a name attribute. The glyph is filled with currentColor
wherever the file leaves the fill unset, so color: on the icon or on any ancestor
recolors it, and it sizes off the inherited font-size. The SVG lives in a shadow
root: color and font-size inherit into it, but a document selector
such as ui-icon svg does not reach it.
Icons inherit font-size from their parent and render at 1.1em of it. To enlarge,
set font-size on the <ui-icon> or its wrapper —
.btn-icon does exactly that, raising its own glyph to 1.4em so the icon fills an appropriate amount of the button.
aria-hidden="true" on itself at mount unless it already carries aria-hidden, aria-label or aria-labelledby. The sample below sets aria-hidden="true" explicitly for clarity.aria-label on the button, or a <span class="visually-hidden"> label inside. An aria-label on the <ui-icon> itself works too, and prevents the element from automatically setting aria-hidden..btn-icon.Add the .spin class to rotate an icon continuously (<ui-icon name="spinner" class="spin">). Full guidance — sizing, the spin() helper, accessibility — on Loading & spinners.
.spin animation token.