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

Examples

Default

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

Sizing and custom sources

Use the icon sizing playground to compare density, component sizes, source calibration and text-relative icons. Icon accepts an SVG in its default slot; contentRatio calibrates its internal whitespace without changing layout.

Reference

Anatomy

Highlight

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

Props

Name	Description	Default	Control
nameOptional	The name of the Material Symbols Outlined icon to display. string | undefined	-
contentRatioOptional	Nominal visible fraction of the source canvas (0.1–1). Defaults to 5/6 for Symbols and 1 for SVG slots. number | undefined	-
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

Slots1

Name	Parameters	Description
default	-	Alternative SVG source. Takes precedence over name; set its contentRatio when the viewBox includes whitespace.

Styling1

Preview

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