Version: 5.x

vm-icon

This component was inspired by Shoelace.

Loads and renders an SVG icon. The icon be loaded from an icon library or from an absolute URL via the src property. Only SVGs on a local or CORS-enabled endpoint are supported. If you're using more than one custom icon, it might make sense to register a custom icon library.

Usage#

<!-- Src. -->
<vm-icon src="/icons/my-icon.svg" label="An icon"></vm-icon>
<!-- Icon library. -->
<vm-icon name="pause" library="material" label="Pause"></vm-icon>

Properties#

PropertyDescriptionTypeDefault
labelAn alternative description to use for accessibility. If omitted, the name or src will be used to generate it.string ∣ undefinedundefined
libraryThe name of a registered icon library.string ∣ undefinedundefined
nameThe name of the icon to draw.string ∣ undefinedundefined
srcThe absolute URL of an SVG file to load.string ∣ undefinedundefined

Events#

EventDescriptionType
vmErrorEmitted when the icon failed to load.CustomEvent<{ status?: number ∣ undefined; }>
vmLoadEmitted when the icon has loaded.CustomEvent<void>

CSS Custom Properties#

NameDescription
--vm-icon-fillThe icon fill color.
--vm-icon-strokeThe icon stroke color.
--vm-icon-transformTransformations applied to the icon.
--vm-icon-transitionTransitions applied to the icon.

Dependencies#

Used by#