noora/docs/components/icon.md
Renders an icon from Noora's shared icon catalog.
<noora-icon name="settings" label="Settings"></noora-icon>
| Attribute | Type or allowed values | Default | Description |
|---|---|---|---|
name | string | "" | Selects the icon by its underscore or hyphen-separated name. |
label | string | None | Provides an accessible label. Omit for decorative icons. |
size | number | 24 | Sets the width and height in pixels. |
active-name | string | None | Selects the icon shown while the parent element has an open data state. |
transition | morph, crossfade_rotate, auto | "auto" | Controls the animated transition between the default and active icons. |
| Part | Description |
|---|---|
icon | The rendered scalable vector graphic. |
Unknown icon names render no graphic.
When active-name is set, the icon observes its parent element's data-state attribute and switches when that state is open.
Click each button to toggle its state and transition between paired icons.
<button data-state="closed" onclick="this.dataset.state = this.dataset.state === 'open' ? 'closed' : 'open'" aria-label="Toggle selector"><noora-icon name="selector" active-name="selector_2" transition="morph"></noora-icon></button>
<button data-state="closed" onclick="this.dataset.state = this.dataset.state === 'open' ? 'closed' : 'open'" aria-label="Toggle menu"><noora-icon name="menu" active-name="close" transition="crossfade_rotate"></noora-icon></button>
<button data-state="closed" onclick="this.dataset.state = this.dataset.state === 'open' ? 'closed' : 'open'" aria-label="Toggle theme"><noora-icon name="sun_high" active-name="moon" transition="crossfade_rotate"></noora-icon></button>
<button data-state="closed" onclick="this.dataset.state = this.dataset.state === 'open' ? 'closed' : 'open'" aria-label="Toggle playback"><noora-icon name="player_play" active-name="player_pause" transition="auto"></noora-icon></button>