Shape

Action--md-shape-action28pxButton, IconButton, ButtonGroup, Select, DatePicker actions, FAB menu actions

Field--md-shape-field16pxTextField rounded containers

Field square--md-shape-field-square12pxTextField square containers, InputOtp inputs

Chip--md-shape-chip8pxChip, Menu inactive containers, Tabs active tonal containers, TimePicker fields

Card--md-shape-card12pxCard, rich Tooltip, Tabs tonal containers and focus indicators

Popover--md-shape-popover16pxMenu surfaces, active menu containers, detached SideSheet surfaces

Compact--md-shape-compact4pxSnackbar and plain Tooltip surfaces

Overlay--md-shape-overlay28pxDialog, DatePicker surfaces, TimePicker surfaces

Indicator--md-shape-indicatorfullLinearProgressIndicator, LoadingIndicator, NavigationRail active indicators, ListItem indicators

FAB--md-shape-fab16pxFloatingActionButton and FloatingActionButtonMenu triggers

CSS

:root {
  --md-shape-action: 28px;
  --md-shape-field: 16px;
  --md-shape-field-square: 12px;
  --md-shape-chip: 8px;
  --md-shape-card: 12px;
  --md-shape-popover: 16px;
  --md-shape-compact: 4px;
  --md-shape-overlay: 28px;
  --md-shape-indicator: 9999px;
  --md-shape-fab: 16px;
}

Icon

The icon component renders Material Symbols names directly, making it easy to reuse the same icon tokens across the library and docs.

settingssettings

Anatomy

Highlight

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

Props

Name	Description	Default	Control
`name`Required	The name of the Material Symbols Outlined icon to display. `string`	-
`size`Optional	The size of the Icon. Accepts any valid CSS font-size value, such as "24px", "1.5em". `string \| undefined`	-
`weight`Optional	The font-weight of the Icon `IconWeight \| undefined`	-	-
`variant`Optional	Variant of the Icon. "standalone" (default) means the Icon will use the default weight of 400 if weight is not specified. "inline" means the Icon will inherit the font-weight from its context if weight is not specified. `standaloneinline`	`"standalone"`	standaloneinline

Events0

No events documented.

Slots0

No slots documented.

Examples

Default

settingssettings Inline variant that follows font weight settings