Icon

Render a single icon from supported libraries (prefer Material Icons with mi: prefix, e.g. mi:save).

HTML tag: c-e0a523725f9fb48e78c62fc23f387408a

When to use

• decorative or labeled glyph (mi: prefix)
• icon inside button, breadcrumb, or list row
• not for user photos or workflow status

Props

Prop	Type	Default	Description
icon	string
aria_label	string
appearance	string	soft
tone	string	neutral
size	string	md
lazy	boolean	true
adopt_css_into_shadow	boolean	true
mi_css_href	string	https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0
fa_css_href	string	https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css
vaadin_icon_module_href	string	/node_modules/@vaadin/icon/vaadin-icon.js
vaadin_icons_set_module_href	string	/node_modules/@vaadin/icons/vaadin-icons.js
webawesome_module_href	string
density	string	comfortable
csp_nonce	string

Rules

• .icon is required and must include the library prefix (mi:chevron_right, fa:, etc.).
• Set .aria_label when the icon conveys meaning without adjacent text.
• appearance/tone/size/density style the glyph container (defaults: soft, neutral, md, comfortable).
• lazy=true defers heavy font/module loads.

Events

Event	Detail
deps-loaded	lib: string
load-error	lib: string, error: string

Methods

Signature	Description
ensureDeps(lib: string)
renderIcon(lib: string, name: string, aria: string, t: string, s: string, d: string)
loadCSS(href: string)
loadModule(href: string)
adoptCssIntoShadow(href: string)

What to avoid

Do not use ab-icon for user photos (ab-avatar). Do not use ab-icon alone as a large clickable target without aria_label — wrap with ab-button or make parent interactive. Do not invent unprefixed icon names.

Example

<c-e0a523725f9fb48e78c62fc23f387408a .icon=${'mi:edit'} .size=${'sm'} .tone=${'neutral'} .aria_label=${'Edit'}></c-e0a523725f9fb48e78c62fc23f387408a>