Icon
<ahi-icon> | AhiIcon
Icons are used to visually communicate parts of the product and available actions. They can help users more easily understand where they are in the product, and common interaction patterns that are available.
Browsing icons
<ahi-icon> bundles a curated set of
Tabler
icons — the ones used across Azalea products. Set the name attribute to any icon below (click
one to copy its name). Append -filled for a filled variant where one is available.
No icons match your search.
Examples
Colors
Icons inherit their color from the current text color. Thus, you can set the color attribute on
the <ahi-icon> element or an ancestor to change the color.
<ahi-icon name="star-filled" color="red"></ahi-icon>
<ahi-icon name="star-filled" color="var(--ahi-color-green-600)"></ahi-icon>
<ahi-icon name="star-filled" color="var(--ahi-brand-blue)"></ahi-icon>
<ahi-icon name="star-filled" color="var(--ahi-icon-warning)"></ahi-icon>
<div style="color: var(--ahi-color-purple-600);">
<ahi-icon name="star-filled"></ahi-icon>
<ahi-icon name="star-filled"></ahi-icon>
<ahi-icon name="star-filled"></ahi-icon>
<ahi-icon name="star-filled"></ahi-icon>
</div>
Sizes
Use the size attribute to change an icon’s size. For guidance on when to use each size, see
Icons under Design.
<ahi-icon name="star" size="minor"></ahi-icon>
<ahi-icon name="star" size="major"></ahi-icon>
<ahi-icon name="star" size="spot"></ahi-icon>
Custom icons
Custom icons can be loaded individually with the default slot. Only SVGs are supported.
Migrating from Health Icons? Previous versions of AKU bundled icons from healthicons.org. These are no longer included. If you use health icon names (e.g.
syringe,blood-pressure,heart-organ) they will no longer render. Use the custom SVG slot to inline them directly, or find a Tabler equivalent.
<ahi-icon color="dodgerblue" size="spot">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
<path d="M7 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
<path d="M17 17m-2 0a2 2 0 1 0 4 0a2 2 0 1 0 -4 0"></path>
<path d="M5 17h-2v-11a1 1 0 0 1 1 -1h9v12m-4 0h6m4 0h2v-6h-8m0 -5h5l3 5"></path>
<path d="M6 10h4m-2 -2v4"></path>
</svg>
</ahi-icon>
Icons render from AKU’s bundled set, so <ahi-icon name="..."> works offline with no
network request. To use an icon that isn’t bundled, register it by name once, then reference it anywhere:
import AhiIcon from '@azaleahealth/azalea-kit-ui/components/icon/icon.js';
AhiIcon.registerIcon({
title: 'my-icon',
default: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">...</svg>'
});
Importing
To import this component using a script tag:
<script type="module" src="/path/to/azalea-kit-ui/dist/components/icon/icon.js"></script>To import this component using a bundler:
import '@azaleahealth/azalea-kit-ui/dist/components/icon/icon.js';Slots
| Name | Description |
|---|---|
| (default) | The default slot used for placing a custom SVG icon. |
Learn more about using slots.
Properties
| Name | Description | Type | Default | |
|---|---|---|---|---|
label
|
An alternate description to use for assistive devices. If omitted, the icon will be considered presentational and ignored by assistive devices. |
string | undefined
|
- | |
name
|
The name of the icon to draw. |
string
|
''
|
|
size
|
The size of the icon. |
'minor' | 'major' | 'spot'
|
'major'
|
|
color
|
The color of the icon. Can accept any valid CSS color value, including custom properties. |
string | undefined
|
- | |
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about properties and attributes.
Methods
| Name | Description | Arguments |
|---|---|---|
registerIcon() |
Register an individual icon |
icon: IconShape
|
registerIcons() |
Register multiple icons |
icons: IconShape[]
|
Learn more about methods.
CSS Parts
| Name | Description |
|---|---|
base |
Deprecated. Use the icon part instead. |
icon |
The component’s outer wrapper. |
Learn more about customizing CSS parts.