Icon

Renders a Material Symbols Outlined icon.

Examples

Sizes

helphelphelp

<Icon icon="help" size="sm" aria-label="help" />
<Icon icon="help" size="md" aria-label="help" />
<Icon icon="help" size="lg" aria-label="help" />

Filled

favoritefavorite

<Icon icon="favorite" size="lg" aria-label="favorite" />
<Icon icon="favorite" size="lg" :fill="true" aria-label="favorite filled" />

Inline in text

Click the help icon for more info.

<p>Click the <Icon icon="help" size="sm" :inline="true" aria-label="help" /> icon for more info.</p>

Props

Prop	Type	Required	Default
icon	string	Yes	—
size	IconSize | number	No	"md"
fill	boolean	No	false
weight	number	No	—
grade	number	No	—
decorative	boolean	No	true
ariaLabel	string	No	—
inline	boolean	No	false