IconButton

Icon buttons expose compact, icon-first actions with the same Material 3 shape, emphasis, and size variants as the library component.

Action components convert title into the library tooltip. See Action Tooltips for the shared behavior and accessible-name fallback.

standard is the default for supplementary actions, including toolbar, list-row, and card actions. Reserve filled for a high-emphasis icon action; use outlined or tonal for intermediate emphasis.

Density

The container changes by 2dp per density step independently of icon sizing, retaining at least 4dp above and below the icon. For the default small size, density 0 / -2 / -4 produces heights of 40 / 36 / 32dp. Explicit container-height tokens take precedence.

Examples

Default

Variants

Sizes

The size prop overrides iconButtonContextKey's size, with small as the fallback. Set iconButtonSize in M3VuePlugin for an application default, or provide the context for a subtree. See component defaults.

Shapes

Widths

Disabled

Toggleable

Tooltip

Use title for a simple text tooltip.

Vue Router

Use the same RouterLink custom pattern as Button, then forward href and navigate to IconButton.

searchfavorite

Current route: /search

Reference

Anatomy

Highlight

Element	Part	Selector
<component>	root	[data-scope="icon-button"][data-part="root"] left_clickLMBCopy
<Icon>	iconconditional	[data-scope="icon-button"][data-part="icon"] left_clickLMBCopy

Props

Name	Description	Default	Control
toggleableOptional	Whether the button is toggleable (like a checkbox). When true, the button must contain an input element of type checkbox or radio. boolean | undefined	undefined
variantOptional	The visual emphasis of the button. standardoutlinedtonalfilled	-	checkstandardoutlinedtonalfilled
sizeOptional	The size of the button. smalllargeextra-smallmediumextra-large	-	checksmalllargeextra-smallmediumextra-large
shapeOptional	The shape of the button. M3Shape | undefined	-	-
widthOptional	The width of the button. defaultnarrowwide	-	checkdefaultnarrowwide
hrefOptional	The href attribute. If provided, the button will be rendered as an anchor element. string | undefined	-
iconOptional	Name of the icon. string | undefined	-
disabledOptional	Whether the button is disabled. boolean | undefined	undefined

Slots1

Name	Parameters	Description
default	-	Default slot for the main content of the icon button. Receives `disabled` as a prop.

Styling254

Preview

Token	Description
--md-icon-button-container-colorColor Fallbackvar(--md-sys-color-primary)	Controls container color.
--md-icon-button-container-heightLayout FallbackSize baseline + 2dp per density step; at least icon size + 8dp	Controls container height.
--md-icon-button-container-shapeShape Fallbackvar(--md-icon-button-container-shape-round,var(--md-shape-action))	Controls container shape.
--md-icon-button-container-shape-roundShape Fallbackvar(--md-shape-action)	Controls container shape round.
--md-icon-button-container-shape-squareShape Fallbackvar(--md-shape-action-square-small)	Controls container shape square.
--md-icon-button-default-leading-spaceLayout Fallback0.5rem	Controls default leading space.
--md-icon-button-default-trailing-spaceLayout Fallback0.5rem	Controls default trailing space.
--md-icon-button-disabled-container-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls disabled container color.
--md-icon-button-disabled-container-opacityDisabled Fallback0.1	Controls disabled container opacity.
--md-icon-button-disabled-icon-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls disabled icon color.
--md-icon-button-disabled-icon-opacityDisabled Fallback0.38	Controls disabled icon opacity.
--md-icon-button-filled-container-colorColor Fallbackvar(--md-sys-color-primary)	Controls filled container color.
--md-icon-button-filled-disabled-container-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls filled disabled container color.
--md-icon-button-filled-disabled-container-opacityDisabled Fallback0.1	Controls filled disabled container opacity.
--md-icon-button-filled-disabled-icon-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls filled disabled icon color.
--md-icon-button-filled-disabled-icon-opacityDisabled Fallback0.38	Controls filled disabled icon opacity.
--md-icon-button-filled-focused-icon-colorFocus Fallbackvar(--md-sys-color-on-primary)	Controls filled focused icon color.
--md-icon-button-filled-focused-state-layer-colorFocus Fallbackvar(--md-sys-color-on-primary)	Controls filled focused state layer color.
--md-icon-button-filled-focused-state-layer-opacityFocus Fallbackvar(--md-sys-state-focus-state-layer-opacity)	Controls filled focused state layer opacity.
--md-icon-button-filled-hovered-icon-colorState Fallbackvar(--md-sys-color-on-primary)	Controls filled hovered icon color.
--md-icon-button-filled-hovered-state-layer-colorState Fallbackvar(--md-sys-color-on-primary)	Controls filled hovered state layer color.
--md-icon-button-filled-hovered-state-layer-opacityState Fallbackvar(--md-sys-state-hover-state-layer-opacity)	Controls filled hovered state layer opacity.
--md-icon-button-filled-icon-colorColor Fallbackvar(--md-sys-color-on-primary)	Controls filled icon color.
--md-icon-button-filled-pressed-icon-colorState Fallbackvar(--md-sys-color-on-primary)	Controls filled pressed icon color.
--md-icon-button-filled-pressed-state-layer-colorState Fallbackvar(--md-sys-color-on-primary)	Controls filled pressed state layer color.
--md-icon-button-filled-pressed-state-layer-opacityState Fallbackvar(--md-sys-state-pressed-state-layer-opacity)	Controls filled pressed state layer opacity.
--md-icon-button-filled-selected-container-colorState Fallbackvar(--md-sys-color-primary)	Controls filled selected container color.
--md-icon-button-filled-selected-focused-icon-colorFocus Fallbackvar(--md-sys-color-on-primary)	Controls filled selected focused icon color.
--md-icon-button-filled-selected-focused-state-layer-colorFocus Fallbackvar(--md-sys-color-on-primary)	Controls filled selected focused state layer color.
--md-icon-button-filled-selected-hovered-icon-colorState Fallbackvar(--md-sys-color-on-primary)	Controls filled selected hovered icon color.
--md-icon-button-filled-selected-hovered-state-layer-colorState Fallbackvar(--md-sys-color-on-primary)	Controls filled selected hovered state layer color.
--md-icon-button-filled-selected-icon-colorState Fallbackvar(--md-sys-color-on-primary)	Controls filled selected icon color.
--md-icon-button-filled-selected-pressed-icon-colorState Fallbackvar(--md-sys-color-on-primary)	Controls filled selected pressed icon color.
--md-icon-button-filled-selected-pressed-state-layer-colorState Fallbackvar(--md-sys-color-on-primary)	Controls filled selected pressed state layer color.
--md-icon-button-filled-unselected-container-colorState Fallbackvar(--md-sys-color-surface-container)	Controls filled unselected container color.
--md-icon-button-filled-unselected-focused-icon-colorFocus Fallbackvar(--md-sys-color-on-surface-variant)	Controls filled unselected focused icon color.
--md-icon-button-filled-unselected-focused-state-layer-colorFocus Fallbackvar(--md-sys-color-on-surface-variant)	Controls filled unselected focused state layer color.
--md-icon-button-filled-unselected-hovered-icon-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls filled unselected hovered icon color.
--md-icon-button-filled-unselected-hovered-state-layer-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls filled unselected hovered state layer color.
--md-icon-button-filled-unselected-icon-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls filled unselected icon color.
--md-icon-button-filled-unselected-pressed-icon-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls filled unselected pressed icon color.
--md-icon-button-filled-unselected-pressed-state-layer-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls filled unselected pressed state layer color.
--md-icon-button-focus-indicator-colorFocus Fallbackvar(--md-sys-color-secondary)	Controls focus indicator color.
--md-icon-button-focus-indicator-outline-offsetFocus Fallbackvar(--md-sys-state-focus-indicator-outer-offset)	Controls focus indicator outline offset.
--md-icon-button-focus-indicator-thicknessFocus Fallbackvar(--md-sys-state-focus-indicator-thickness)	Controls focus indicator thickness.
--md-icon-button-focused-icon-colorFocus Fallbackvar(--md-sys-color-on-primary)	Controls focused icon color.
--md-icon-button-focused-state-layer-colorFocus Fallbackvar(--md-sys-color-on-primary)	Controls focused state layer color.
--md-icon-button-focused-state-layer-opacityFocus Fallbackvar(--md-sys-state-focus-state-layer-opacity)	Controls focused state layer opacity.
--md-icon-button-hovered-icon-colorState Fallbackvar(--md-sys-color-on-primary)	Controls hovered icon color.
--md-icon-button-hovered-state-layer-colorState Fallbackvar(--md-sys-color-on-primary)	Controls hovered state layer color.
--md-icon-button-hovered-state-layer-opacityState Fallbackvar(--md-sys-state-hover-state-layer-opacity)	Controls hovered state layer opacity.
--md-icon-button-icon-colorColor Fallbackvar(--md-sys-color-on-primary)	Controls icon color.
--md-icon-button-icon-sizeLayout FallbackSize, density and icon scale (default reference: 1.5rem)	Controls icon size.
--md-icon-button-large-container-heightLayout FallbackSize baseline + 2dp per density step; at least icon size + 8dp	Controls large container height.
--md-icon-button-large-container-shape-roundShape Fallbackvar(--md-shape-action)	Controls large container shape round.
--md-icon-button-large-container-shape-squareShape Fallbackvar(--md-shape-action-square-large)	Controls large container shape square.
--md-icon-button-large-default-leading-spaceLayout Fallback2rem	Controls large default leading space.
--md-icon-button-large-default-trailing-spaceLayout Fallback2rem	Controls large default trailing space.
--md-icon-button-large-icon-sizeLayout FallbackSize, density and icon scale (default reference: 2rem)	Controls large icon size.
--md-icon-button-large-narrow-leading-spaceLayout Fallback1rem	Controls large narrow leading space.
--md-icon-button-large-narrow-trailing-spaceLayout Fallback1rem	Controls large narrow trailing space.
--md-icon-button-large-outlined-outline-widthLayout Fallback0.125rem	Controls large outlined outline width.
--md-icon-button-large-pressed-container-corner-size-motion-spring-dampingMotion Fallbackvar(--md-sys-motion-spring-fast-spatial-damping)	Controls large pressed container corner size motion spring damping.
--md-icon-button-large-pressed-container-corner-size-motion-spring-stiffnessMotion Fallbackvar(--md-sys-motion-spring-fast-spatial-stiffness)	Controls large pressed container corner size motion spring stiffness.
--md-icon-button-large-pressed-container-shapeShape Fallbackvar(--md-shape-action-pressed-large)	Controls large pressed container shape.
--md-icon-button-large-selected-container-shape-roundShape Fallbackvar(--md-shape-action-selected-large)	Controls large selected container shape round.
--md-icon-button-large-selected-container-shape-squareShape Fallbackvar(--md-shape-action)	Controls large selected container shape square.
--md-icon-button-large-wide-leading-spaceLayout Fallback3rem	Controls large wide leading space.
--md-icon-button-large-wide-trailing-spaceLayout Fallback3rem	Controls large wide trailing space.
--md-icon-button-leading-spaceLayout Fallbackvar(--md-icon-button-default-leading-space,0.5rem)	Controls leading space.
--md-icon-button-medium-container-heightLayout FallbackSize baseline + 2dp per density step; at least icon size + 8dp	Controls medium container height.
--md-icon-button-medium-container-shape-roundShape Fallbackvar(--md-shape-action)	Controls medium container shape round.
--md-icon-button-medium-container-shape-squareShape Fallbackvar(--md-shape-action-square-medium)	Controls medium container shape square.
--md-icon-button-medium-default-leading-spaceLayout Fallback1rem	Controls medium default leading space.
--md-icon-button-medium-default-trailing-spaceLayout Fallback1rem	Controls medium default trailing space.
--md-icon-button-medium-icon-sizeLayout FallbackSize, density and icon scale (default reference: 1.5rem)	Controls medium icon size.
--md-icon-button-medium-narrow-leading-spaceLayout Fallback0.75rem	Controls medium narrow leading space.
--md-icon-button-medium-narrow-trailing-spaceLayout Fallback0.75rem	Controls medium narrow trailing space.
--md-icon-button-medium-outlined-outline-widthLayout Fallback0.0625rem	Controls medium outlined outline width.
--md-icon-button-medium-pressed-container-corner-size-motion-spring-dampingMotion Fallbackvar(--md-sys-motion-spring-fast-spatial-damping)	Controls medium pressed container corner size motion spring damping.
--md-icon-button-medium-pressed-container-corner-size-motion-spring-stiffnessMotion Fallbackvar(--md-sys-motion-spring-fast-spatial-stiffness)	Controls medium pressed container corner size motion spring stiffness.
--md-icon-button-medium-pressed-container-shapeShape Fallbackvar(--md-shape-action-pressed-medium)	Controls medium pressed container shape.
--md-icon-button-medium-selected-container-shape-roundShape Fallbackvar(--md-shape-action-selected-medium)	Controls medium selected container shape round.
--md-icon-button-medium-selected-container-shape-squareShape Fallbackvar(--md-shape-action)	Controls medium selected container shape square.
--md-icon-button-medium-wide-leading-spaceLayout Fallback1.5rem	Controls medium wide leading space.
--md-icon-button-medium-wide-trailing-spaceLayout Fallback1.5rem	Controls medium wide trailing space.
--md-icon-button-narrow-leading-spaceLayout Fallback0.25rem	Controls narrow leading space.
--md-icon-button-narrow-trailing-spaceLayout Fallback0.25rem	Controls narrow trailing space.
--md-icon-button-outlined-disabled-icon-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls outlined disabled icon color.
--md-icon-button-outlined-disabled-icon-opacityDisabled Fallback0.38	Controls outlined disabled icon opacity.
--md-icon-button-outlined-disabled-outline-colorDisabled Fallbackvar(--md-sys-color-outline-variant)	Controls outlined disabled outline color.
--md-icon-button-outlined-focused-icon-colorFocus Fallbackvar(--md-sys-color-on-surface-variant)	Controls outlined focused icon color.
--md-icon-button-outlined-focused-state-layer-colorFocus Fallbackvar(--md-sys-color-on-surface-variant)	Controls outlined focused state layer color.
--md-icon-button-outlined-focused-state-layer-opacityFocus Fallbackvar(--md-sys-state-focus-state-layer-opacity)	Controls outlined focused state layer opacity.
--md-icon-button-outlined-hovered-icon-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls outlined hovered icon color.
--md-icon-button-outlined-hovered-state-layer-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls outlined hovered state layer color.
--md-icon-button-outlined-hovered-state-layer-opacityState Fallbackvar(--md-sys-state-hover-state-layer-opacity)	Controls outlined hovered state layer opacity.
--md-icon-button-outlined-icon-colorColor Fallbackvar(--md-sys-color-on-surface-variant)	Controls outlined icon color.
--md-icon-button-outlined-outline-colorColor Fallbackvar(--md-sys-color-outline-variant)	Controls outlined outline color.
--md-icon-button-outlined-pressed-icon-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls outlined pressed icon color.
--md-icon-button-outlined-pressed-state-layer-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls outlined pressed state layer color.
--md-icon-button-outlined-pressed-state-layer-opacityState Fallbackvar(--md-sys-state-pressed-state-layer-opacity)	Controls outlined pressed state layer opacity.
--md-icon-button-outlined-selected-container-colorState Fallbackvar(--md-sys-color-inverse-surface)	Controls outlined selected container color.
--md-icon-button-outlined-selected-disabled-container-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls outlined selected disabled container color.
--md-icon-button-outlined-selected-disabled-container-opacityDisabled Fallback0.1	Controls outlined selected disabled container opacity.
--md-icon-button-outlined-selected-focused-icon-colorFocus Fallbackvar(--md-sys-color-inverse-on-surface)	Controls outlined selected focused icon color.
--md-icon-button-outlined-selected-focused-state-layer-colorFocus Fallbackvar(--md-sys-color-inverse-on-surface)	Controls outlined selected focused state layer color.
--md-icon-button-outlined-selected-hovered-icon-colorState Fallbackvar(--md-sys-color-inverse-on-surface)	Controls outlined selected hovered icon color.
--md-icon-button-outlined-selected-hovered-state-layer-colorState Fallbackvar(--md-sys-color-inverse-on-surface)	Controls outlined selected hovered state layer color.
--md-icon-button-outlined-selected-icon-colorState Fallbackvar(--md-sys-color-inverse-on-surface)	Controls outlined selected icon color.
--md-icon-button-outlined-selected-pressed-icon-colorState Fallbackvar(--md-sys-color-inverse-on-surface)	Controls outlined selected pressed icon color.
--md-icon-button-outlined-selected-pressed-state-layer-colorState Fallbackvar(--md-sys-color-inverse-on-surface)	Controls outlined selected pressed state layer color.
--md-icon-button-outlined-unselected-disabled-outline-colorDisabled Fallbackvar(--md-sys-color-outline-variant)	Controls outlined unselected disabled outline color.
--md-icon-button-outlined-unselected-focused-icon-colorFocus Fallbackvar(--md-sys-color-on-surface-variant)	Controls outlined unselected focused icon color.
--md-icon-button-outlined-unselected-focused-state-layer-colorFocus Fallbackvar(--md-sys-color-on-surface-variant)	Controls outlined unselected focused state layer color.
--md-icon-button-outlined-unselected-hovered-icon-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls outlined unselected hovered icon color.
--md-icon-button-outlined-unselected-hovered-state-layer-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls outlined unselected hovered state layer color.
--md-icon-button-outlined-unselected-icon-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls outlined unselected icon color.
--md-icon-button-outlined-unselected-outline-colorState Fallbackvar(--md-sys-color-outline-variant)	Controls outlined unselected outline color.
--md-icon-button-outlined-unselected-pressed-icon-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls outlined unselected pressed icon color.
--md-icon-button-outlined-unselected-pressed-state-layer-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls outlined unselected pressed state layer color.
--md-icon-button-pressed-container-corner-size-motion-spring-dampingMotion Fallbackvar(--md-sys-motion-spring-fast-spatial-damping)	Controls pressed container corner size motion spring damping.
--md-icon-button-pressed-container-corner-size-motion-spring-stiffnessMotion Fallbackvar(--md-sys-motion-spring-fast-spatial-stiffness)	Controls pressed container corner size motion spring stiffness.
--md-icon-button-pressed-container-shapeShape Fallbackvar(--md-shape-action-pressed-small)	Controls pressed container shape.
--md-icon-button-pressed-icon-colorState Fallbackvar(--md-sys-color-on-primary)	Controls pressed icon color.
--md-icon-button-pressed-state-layer-colorState Fallbackvar(--md-sys-color-on-primary)	Controls pressed state layer color.
--md-icon-button-pressed-state-layer-opacityState Fallbackvar(--md-sys-state-pressed-state-layer-opacity)	Controls pressed state layer opacity.
--md-icon-button-selected-container-colorState Fallbackvar(--md-sys-color-primary)	Controls selected container color.
--md-icon-button-selected-container-shapeShape Fallbackvar(--md-icon-button-xsmall-selected-container-shape-round,var(--md-shape-action-selected-small))	Controls selected container shape.
--md-icon-button-selected-container-shape-roundShape Fallbackvar(--md-shape-action-selected-small)	Controls selected container shape round.
--md-icon-button-selected-container-shape-squareShape Fallbackvar(--md-shape-action)	Controls selected container shape square.
--md-icon-button-selected-focused-icon-colorFocus Fallbackvar(--md-sys-color-on-primary)	Controls selected focused icon color.
--md-icon-button-selected-focused-state-layer-colorFocus Fallbackvar(--md-sys-color-on-primary)	Controls selected focused state layer color.
--md-icon-button-selected-hovered-icon-colorState Fallbackvar(--md-sys-color-on-primary)	Controls selected hovered icon color.
--md-icon-button-selected-hovered-state-layer-colorState Fallbackvar(--md-sys-color-on-primary)	Controls selected hovered state layer color.
--md-icon-button-selected-icon-colorState Fallbackvar(--md-sys-color-on-primary)	Controls selected icon color.
--md-icon-button-selected-pressed-icon-colorState Fallbackvar(--md-sys-color-on-primary)	Controls selected pressed icon color.
--md-icon-button-selected-pressed-state-layer-colorState Fallbackvar(--md-sys-color-on-primary)	Controls selected pressed state layer color.
--md-icon-button-small-container-heightLayout FallbackSize baseline + 2dp per density step; at least icon size + 8dp	Controls small container height.
--md-icon-button-small-container-shape-roundShape Fallbackvar(--md-shape-action)	Controls small container shape round.
--md-icon-button-small-container-shape-squareShape Fallbackvar(--md-shape-action-square-small)	Controls small container shape square.
--md-icon-button-small-default-leading-spaceLayout Fallback0.5rem	Controls small default leading space.
--md-icon-button-small-default-trailing-spaceLayout Fallback0.5rem	Controls small default trailing space.
--md-icon-button-small-icon-sizeLayout FallbackSize, density and icon scale (default reference: 1.5rem)	Controls small icon size.
--md-icon-button-small-narrow-leading-spaceLayout Fallback0.25rem	Controls small narrow leading space.
--md-icon-button-small-narrow-trailing-spaceLayout Fallback0.25rem	Controls small narrow trailing space.
--md-icon-button-small-outlined-outline-widthLayout Fallback0.0625rem	Controls small outlined outline width.
--md-icon-button-small-pressed-container-corner-size-motion-spring-dampingMotion Fallbackvar(--md-sys-motion-spring-fast-spatial-damping)	Controls small pressed container corner size motion spring damping.
--md-icon-button-small-pressed-container-corner-size-motion-spring-stiffnessMotion Fallbackvar(--md-sys-motion-spring-fast-spatial-stiffness)	Controls small pressed container corner size motion spring stiffness.
--md-icon-button-small-pressed-container-shapeShape Fallbackvar(--md-shape-action-pressed-small)	Controls small pressed container shape.
--md-icon-button-small-selected-container-shape-roundShape Fallbackvar(--md-shape-action-selected-small)	Controls small selected container shape round.
--md-icon-button-small-selected-container-shape-squareShape Fallbackvar(--md-shape-action)	Controls small selected container shape square.
--md-icon-button-small-wide-leading-spaceLayout Fallback0.875rem	Controls small wide leading space.
--md-icon-button-small-wide-trailing-spaceLayout Fallback0.875rem	Controls small wide trailing space.
--md-icon-button-standard-disabled-icon-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls standard disabled icon color.
--md-icon-button-standard-disabled-icon-opacityDisabled Fallback0.38	Controls standard disabled icon opacity.
--md-icon-button-standard-focused-icon-colorFocus Fallbackvar(--md-sys-color-on-surface-variant)	Controls standard focused icon color.
--md-icon-button-standard-focused-state-layer-colorFocus Fallbackvar(--md-sys-color-on-surface-variant)	Controls standard focused state layer color.
--md-icon-button-standard-focused-state-layer-opacityFocus Fallbackvar(--md-sys-state-focus-state-layer-opacity)	Controls standard focused state layer opacity.
--md-icon-button-standard-hovered-icon-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls standard hovered icon color.
--md-icon-button-standard-hovered-state-layer-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls standard hovered state layer color.
--md-icon-button-standard-hovered-state-layer-opacityState Fallbackvar(--md-sys-state-hover-state-layer-opacity)	Controls standard hovered state layer opacity.
--md-icon-button-standard-icon-colorColor Fallbackvar(--md-sys-color-on-surface-variant)	Controls standard icon color.
--md-icon-button-standard-pressed-icon-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls standard pressed icon color.
--md-icon-button-standard-pressed-state-layer-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls standard pressed state layer color.
--md-icon-button-standard-pressed-state-layer-opacityState Fallbackvar(--md-sys-state-pressed-state-layer-opacity)	Controls standard pressed state layer opacity.
--md-icon-button-standard-selected-focused-icon-colorFocus Fallbackvar(--md-sys-color-primary)	Controls standard selected focused icon color.
--md-icon-button-standard-selected-focused-state-layer-colorFocus Fallbackvar(--md-sys-color-primary)	Controls standard selected focused state layer color.
--md-icon-button-standard-selected-hovered-icon-colorState Fallbackvar(--md-sys-color-primary)	Controls standard selected hovered icon color.
--md-icon-button-standard-selected-hovered-state-layer-colorState Fallbackvar(--md-sys-color-primary)	Controls standard selected hovered state layer color.
--md-icon-button-standard-selected-icon-colorState Fallbackvar(--md-sys-color-primary)	Controls standard selected icon color.
--md-icon-button-standard-selected-pressed-icon-colorState Fallbackvar(--md-sys-color-primary)	Controls standard selected pressed icon color.
--md-icon-button-standard-selected-pressed-state-layer-colorState Fallbackvar(--md-sys-color-primary)	Controls standard selected pressed state layer color.
--md-icon-button-standard-unselected-focused-icon-colorFocus Fallbackvar(--md-sys-color-on-surface-variant)	Controls standard unselected focused icon color.
--md-icon-button-standard-unselected-focused-state-layer-colorFocus Fallbackvar(--md-sys-color-on-surface-variant)	Controls standard unselected focused state layer color.
--md-icon-button-standard-unselected-hovered-icon-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls standard unselected hovered icon color.
--md-icon-button-standard-unselected-hovered-state-layer-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls standard unselected hovered state layer color.
--md-icon-button-standard-unselected-icon-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls standard unselected icon color.
--md-icon-button-standard-unselected-pressed-icon-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls standard unselected pressed icon color.
--md-icon-button-standard-unselected-pressed-state-layer-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls standard unselected pressed state layer color.
--md-icon-button-tonal-container-colorColor Fallbackvar(--md-sys-color-secondary-container)	Controls tonal container color.
--md-icon-button-tonal-disabled-container-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls tonal disabled container color.
--md-icon-button-tonal-disabled-container-opacityDisabled Fallback0.1	Controls tonal disabled container opacity.
--md-icon-button-tonal-disabled-icon-colorDisabled Fallbackvar(--md-sys-color-on-surface)	Controls tonal disabled icon color.
--md-icon-button-tonal-disabled-icon-opacityDisabled Fallback0.38	Controls tonal disabled icon opacity.
--md-icon-button-tonal-focused-icon-colorFocus Fallbackvar(--md-sys-color-on-secondary-container)	Controls tonal focused icon color.
--md-icon-button-tonal-focused-state-layer-colorFocus Fallbackvar(--md-sys-color-on-secondary-container)	Controls tonal focused state layer color.
--md-icon-button-tonal-focused-state-layer-opacityFocus Fallbackvar(--md-sys-state-focus-state-layer-opacity)	Controls tonal focused state layer opacity.
--md-icon-button-tonal-hovered-icon-colorState Fallbackvar(--md-sys-color-on-secondary-container)	Controls tonal hovered icon color.
--md-icon-button-tonal-hovered-state-layer-colorState Fallbackvar(--md-sys-color-on-secondary-container)	Controls tonal hovered state layer color.
--md-icon-button-tonal-hovered-state-layer-opacityState Fallbackvar(--md-sys-state-hover-state-layer-opacity)	Controls tonal hovered state layer opacity.
--md-icon-button-tonal-icon-colorColor Fallbackvar(--md-sys-color-on-secondary-container)	Controls tonal icon color.
--md-icon-button-tonal-pressed-icon-colorState Fallbackvar(--md-sys-color-on-secondary-container)	Controls tonal pressed icon color.
--md-icon-button-tonal-pressed-state-layer-colorState Fallbackvar(--md-sys-color-on-secondary-container)	Controls tonal pressed state layer color.
--md-icon-button-tonal-pressed-state-layer-opacityState Fallbackvar(--md-sys-state-pressed-state-layer-opacity)	Controls tonal pressed state layer opacity.
--md-icon-button-tonal-selected-container-colorState Fallbackvar(--md-sys-color-secondary)	Controls tonal selected container color.
--md-icon-button-tonal-selected-focused-icon-colorFocus Fallbackvar(--md-sys-color-on-secondary)	Controls tonal selected focused icon color.
--md-icon-button-tonal-selected-focused-state-layer-colorFocus Fallbackvar(--md-sys-color-on-secondary)	Controls tonal selected focused state layer color.
--md-icon-button-tonal-selected-hovered-icon-colorState Fallbackvar(--md-sys-color-on-secondary)	Controls tonal selected hovered icon color.
--md-icon-button-tonal-selected-hovered-state-layer-colorState Fallbackvar(--md-sys-color-on-secondary)	Controls tonal selected hovered state layer color.
--md-icon-button-tonal-selected-icon-colorState Fallbackvar(--md-sys-color-on-secondary)	Controls tonal selected icon color.
--md-icon-button-tonal-selected-pressed-icon-colorState Fallbackvar(--md-sys-color-on-secondary)	Controls tonal selected pressed icon color.
--md-icon-button-tonal-selected-pressed-state-layer-colorState Fallbackvar(--md-sys-color-on-secondary)	Controls tonal selected pressed state layer color.
--md-icon-button-tonal-unselected-container-colorState Fallbackvar(--md-sys-color-secondary-container)	Controls tonal unselected container color.
--md-icon-button-tonal-unselected-focused-icon-colorFocus Fallbackvar(--md-sys-color-on-secondary-container)	Controls tonal unselected focused icon color.
--md-icon-button-tonal-unselected-focused-state-layer-colorFocus Fallbackvar(--md-sys-color-on-secondary-container)	Controls tonal unselected focused state layer color.
--md-icon-button-tonal-unselected-hovered-icon-colorState Fallbackvar(--md-sys-color-on-secondary-container)	Controls tonal unselected hovered icon color.
--md-icon-button-tonal-unselected-hovered-state-layer-colorState Fallbackvar(--md-sys-color-on-secondary-container)	Controls tonal unselected hovered state layer color.
--md-icon-button-tonal-unselected-icon-colorState Fallbackvar(--md-sys-color-on-secondary-container)	Controls tonal unselected icon color.
--md-icon-button-tonal-unselected-pressed-icon-colorState Fallbackvar(--md-sys-color-on-secondary-container)	Controls tonal unselected pressed icon color.
--md-icon-button-tonal-unselected-pressed-state-layer-colorState Fallbackvar(--md-sys-color-on-secondary-container)	Controls tonal unselected pressed state layer color.
--md-icon-button-trailing-spaceLayout Fallbackvar(--md-icon-button-default-trailing-space,0.5rem)	Controls trailing space.
--md-icon-button-unselected-container-colorState Fallbackvar(--md-sys-color-surface-container)	Controls unselected container color.
--md-icon-button-unselected-focused-icon-colorFocus Fallbackvar(--md-sys-color-on-surface-variant)	Controls unselected focused icon color.
--md-icon-button-unselected-focused-state-layer-colorFocus Fallbackvar(--md-sys-color-on-surface-variant)	Controls unselected focused state layer color.
--md-icon-button-unselected-hovered-icon-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls unselected hovered icon color.
--md-icon-button-unselected-hovered-state-layer-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls unselected hovered state layer color.
--md-icon-button-unselected-icon-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls unselected icon color.
--md-icon-button-unselected-pressed-icon-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls unselected pressed icon color.
--md-icon-button-unselected-pressed-state-layer-colorState Fallbackvar(--md-sys-color-on-surface-variant)	Controls unselected pressed state layer color.
--md-icon-button-wide-leading-spaceLayout Fallback0.875rem	Controls wide leading space.
--md-icon-button-wide-trailing-spaceLayout Fallback0.875rem	Controls wide trailing space.
--md-icon-button-xlarge-container-heightLayout FallbackSize baseline + 2dp per density step; at least icon size + 8dp	Controls xlarge container height.
--md-icon-button-xlarge-container-shape-roundShape Fallbackvar(--md-shape-action)	Controls xlarge container shape round.
--md-icon-button-xlarge-container-shape-squareShape Fallbackvar(--md-shape-action-square-large)	Controls xlarge container shape square.
--md-icon-button-xlarge-default-leading-spaceLayout Fallback3rem	Controls xlarge default leading space.
--md-icon-button-xlarge-default-trailing-spaceLayout Fallback3rem	Controls xlarge default trailing space.
--md-icon-button-xlarge-icon-sizeLayout FallbackSize, density and icon scale (default reference: 2.5rem)	Controls xlarge icon size.
--md-icon-button-xlarge-narrow-leading-spaceLayout Fallback2rem	Controls xlarge narrow leading space.
--md-icon-button-xlarge-narrow-trailing-spaceLayout Fallback2rem	Controls xlarge narrow trailing space.
--md-icon-button-xlarge-outlined-outline-widthLayout Fallback0.1875rem	Controls xlarge outlined outline width.
--md-icon-button-xlarge-pressed-container-corner-size-motion-spring-dampingMotion Fallbackvar(--md-sys-motion-spring-fast-spatial-damping)	Controls xlarge pressed container corner size motion spring damping.
--md-icon-button-xlarge-pressed-container-corner-size-motion-spring-stiffnessMotion Fallbackvar(--md-sys-motion-spring-fast-spatial-stiffness)	Controls xlarge pressed container corner size motion spring stiffness.
--md-icon-button-xlarge-pressed-container-shapeShape Fallbackvar(--md-shape-action-pressed-large)	Controls xlarge pressed container shape.
--md-icon-button-xlarge-selected-container-shape-roundShape Fallbackvar(--md-shape-action-selected-large)	Controls xlarge selected container shape round.
--md-icon-button-xlarge-selected-container-shape-squareShape Fallbackvar(--md-shape-action)	Controls xlarge selected container shape square.
--md-icon-button-xlarge-wide-leading-spaceLayout Fallback4.5rem	Controls xlarge wide leading space.
--md-icon-button-xlarge-wide-trailing-spaceLayout Fallback4.5rem	Controls xlarge wide trailing space.
--md-icon-button-xsmall-container-heightLayout FallbackSize baseline + 2dp per density step; at least icon size + 8dp	Controls xsmall container height.
--md-icon-button-xsmall-container-shape-roundShape Fallbackvar(--md-shape-action)	Controls xsmall container shape round.
--md-icon-button-xsmall-container-shape-squareShape Fallbackvar(--md-shape-action-square-small)	Controls xsmall container shape square.
--md-icon-button-xsmall-default-leading-spaceLayout Fallback0.375rem	Controls xsmall default leading space.
--md-icon-button-xsmall-default-trailing-spaceLayout Fallback0.375rem	Controls xsmall default trailing space.
--md-icon-button-xsmall-icon-sizeLayout FallbackSize, density and icon scale (default reference: 1.25rem)	Controls xsmall icon size.
--md-icon-button-xsmall-narrow-leading-spaceLayout Fallback0.25rem	Controls xsmall narrow leading space.
--md-icon-button-xsmall-narrow-trailing-spaceLayout Fallback0.25rem	Controls xsmall narrow trailing space.
--md-icon-button-xsmall-outlined-outline-widthLayout Fallback0.0625rem	Controls xsmall outlined outline width.
--md-icon-button-xsmall-pressed-container-corner-size-motion-spring-dampingMotion Fallbackvar(--md-sys-motion-spring-fast-spatial-damping)	Controls xsmall pressed container corner size motion spring damping.
--md-icon-button-xsmall-pressed-container-corner-size-motion-spring-stiffnessMotion Fallbackvar(--md-sys-motion-spring-fast-spatial-stiffness)	Controls xsmall pressed container corner size motion spring stiffness.
--md-icon-button-xsmall-pressed-container-shapeShape Fallbackvar(--md-shape-action-pressed-small)	Controls xsmall pressed container shape.
--md-icon-button-xsmall-selected-container-shape-roundShape Fallbackvar(--md-shape-action-selected-small)	Controls xsmall selected container shape round.
--md-icon-button-xsmall-selected-container-shape-squareShape Fallbackvar(--md-shape-action)	Controls xsmall selected container shape square.
--md-icon-button-xsmall-wide-leading-spaceLayout Fallback0.625rem	Controls xsmall wide leading space.
--md-icon-button-xsmall-wide-trailing-spaceLayout Fallback0.625rem	Controls xsmall wide trailing space.