Docs / Components
SenseIconComponent
Semantic inline SVG icons from @artificialsenselabs/ui for buttons, alerts, and form affordances.
Live demo: run nx serve showcase and open /components/icon (port 4202).
Overview
Category: Display / primitives. Selector: sense-icon. Import: import { SenseIconComponent } from '@artificialsenselabs/ui';
<sense-icon name="search" size="sm" ariaLabel="Search" />API
Generated from libs/ui/src/lib/icon/sense-icon/sense-icon.component.ts — run pnpm run docs:api to refresh.
| Input | Type | Default | Description |
|---|---|---|---|
name | SenseIconName | 'search' | Glyph name from the built-in set. Default `search`. |
size | SenseIconSize | 'md' | Visual scale: `sm` | `md` | `lg`. Default `md`. |
ariaLabel | string | null | null | Accessible name — omit when the icon is decorative or inside a labelled control. |
spin | boolean | false | When true, applies spin animation (also auto-enabled for the `spinner` glyph). |
Accessibility
- Decorative icons set
aria-hidden="true"on host and SVG. - Labelled icons expose
role="img"andaria-label. - Prefer parent control labels (e.g.
sense-button) over per-icon labels in composites. - Spin animation pauses under
prefers-reduced-motion: reduce.