image selects the glyph; an empty value hides it. Without image, the glyph is
circle. Values shorter than three Unicode code points render as text; otherwise a slash selects
an image, fa- selects Font Awesome, and other values select Material Icons. Font icons require
the corresponding stylesheet, loaded by these demos.
label supplies visible fallback text (empty by default). Default-slot payload replaces it,
preserving markup. Edit label above for live text; the examples below demonstrate
rich slot content captured when each icon connects. aria-label names the glyph with one image role; otherwise the glyph is
decorative. Migrate accessibility-only uses of label to aria-label. Default slot
content remains accessible independently. Icons have no click, hover, focus, selected, or disabled behavior;
the containing action owns interactive states. Color is inherited. Hidden uses attribute presence.
All seven legacy use-case groups: direction, size, Unicode/emoji, Material Icons, Font Awesome families, module/external images, and color inheritance.
align="start|center|end" aligns content within available inline space and defaults to center. It works with both row and column layouts; start and end follow the text direction, including RTL. Give the host a width to see the alignment. The container owns sizing and placement.
Public attributes and slots
imagearia-labellabelsizedirectionalignhiddenclass
Slots: Default slot overrides visible label fallback; direction arranges the icon and content in a row or column.