IconButton

Icon buttons expose compact, icon-first actions with the same Material 3 shape, color, 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.

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
colorOptional	The color style of the button. filledtonaloutlinedstandard	-	checkfilledtonaloutlinedstandard
sizeOptional	The size of the button. smalllargeextra-smallmediumextra-large	-	checksmalllargeextra-smallmediumextra-large
shapeOptional	The shape of the button. roundedsquare	-	checkroundedsquare
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

Events0

No events documented.

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 Fallback2.5rem	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 Fallback1.5rem	Controls icon size.
--md-icon-button-large-container-heightLayout Fallback6rem	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 Fallback2rem	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 Fallback3.5rem	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 Fallback1.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 Fallback2.5rem	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 Fallback1.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 Fallback8.5rem	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 Fallback2.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 Fallback2rem	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 Fallback1.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.

Examples

Default

Colors

Sizes

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