Appearance
Icon
A Material Symbols glyph, colored and sized by the component's style.
In Studio
In Studio, double-click Icon in the Components category of the Components panel. It is added to the open view, where you can drag it into place.
When to use
Use Icon for a static pictogram — a navigation glyph, a decorative marker. For a state that changes with a tag value, prefer Status Indicator or a smart-object symbol.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| Icon Name | String | star | The Material Symbols glyph name (e.g. star, settings). Falls back to star if left blank. |
| Variant | outlined, filled, rounded, sharp | outlined | The glyph style: outlined, rounded, sharp, or filled. filled renders using the outlined glyph family with its fill axis turned on, rather than a distinct filled font. |
| Weight | 100, 200, 300, 400, 500, 600, 700 | 400 | The glyph stroke weight, 100–700. |
| Fill | 0, 1 | 0 | 1 forces the glyph's fill axis on regardless of Variant; 0 (default) leaves fill controlled by Variant alone. |
Binding
This component has no single value binding.
No bindable value — Icon is static chrome, though its color and size can still be bound via the universal component style.