Icon

The icon component renders Material Symbols names directly, making it easy to reuse the same icon tokens across the library and docs. Standalone icons are 24px by default, independent of the surrounding text size. Use the inline variant when an icon should follow the surrounding text size and weight.

settingssettings

Anatomy

Highlight

Element	Part	Selector
<span>	root	[data-scope="icon"][data-part="root"] left_clickLMBCopy

Props

Name	Description	Default	Control
nameRequired	The name of the Material Symbols Outlined icon to display. string	-
sizeOptional	An explicit Icon size that overrides the variant default and --md-icon-size context. Accepts any valid CSS font-size value, such as "24px", "1.5em". string | undefined	-
weightOptional	The font-weight of the Icon IconWeight | undefined	-	-
variantOptional	Variant of the Icon. "standalone" (default) uses the default size and weight. "inline" follows the surrounding text size and weight unless explicitly overridden. standaloneinline	"standalone"	standaloneinline

Events0

No events documented.

Slots0

No slots documented.

Styling1

Preview

Token	Description
--md-icon-sizeLayout Fallback1.5rem	Controls the icon size. Standalone icons default to 1.5rem; inline icons default to 1em.

Examples

Default

Standalone icon defaults to 24px settingssettings Inline variant follows text size and weight settings