Icon
Renders an SVG icon registered via registerIcons()/registerAllIcons() from
@andersseen/icon. Always aria-hidden="true" — it’s treated as purely
decorative, so any accessible name (e.g. “Close”, “Copy”) must come from the
interactive element it’s inside of (aria-label on a button, visible text,
etc.), never from the icon itself.
Used internally by most other components (and-alert, and-button’s icon size,
and-drawer, and-modal, and-navbar, and-select, and more) — icons are
registered automatically when you use the
@andersseen/astro integration or call
registerAllIcons() yourself.
Example
Section titled “Example”<and-icon name="star" size="20"></and-icon><and-icon name="settings" size="20"></and-icon><and-icon name="alert-circle" size="20"></and-icon><and-icon name="check" size="20" color="green"></and-icon>Properties
Section titled “Properties”| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
color | color | The stroke/fill color (defaults to currentColor for theme inheritance). | string | 'currentColor' |
name | name | The name of the icon to render (must be registered via registerIcons()). | string | undefined |
size | size | The size of the icon in pixels. | number | string | 24 |
strokeWidth | stroke-width | SVG stroke width. | number | string | 2 |