图标按钮
图标按钮提供紧凑、以图标为主的操作，并沿用组件库的 Material 3 形状、强调层级和尺寸变体。
操作组件会将 title 转换为组件库的工具提示。有关共同行为和可访问名称回退方式，请参阅操作工具提示。
工具栏、列表行和卡片中的辅助操作默认使用 standard。filled 留给高强调的图标操作；中等强调程度可使用 outlined 或 tonal。
密度
每个密度级别会使容器尺寸变化 2dp，且不影响图标尺寸；图标上下至少保留 4dp 的间距。对于默认的 small 尺寸，密度 0 / -2 / -4 对应的高度分别为 40 / 36 / 32dp。显式设置的容器高度 Token 优先级更高。
示例
默认
变体
尺寸
size 属性优先于 iconButtonContextKey 中的 size，内置回退值为 small。可在 M3VuePlugin 中设置 iconButtonSize 作为应用默认值，或通过上下文配置子树。详见组件默认值。
形状
宽度s
禁用
可切换
工具提示
简单的文本工具提示可通过 title 设置。
Vue Router
使用与 Button 相同的 RouterLink custom 模式，再将 href 和 navigate 传给 IconButton。
参考
结构
| 元素 | 部件 | 选择器 |
|---|---|---|
<component> | root | [data-scope="icon-button"][data-part="root"]鼠标左键单击复制 |
<Icon> | icon条件显示 | [data-scope="icon-button"][data-part="icon"]鼠标左键单击复制 |
属性
| 名称 | 说明 | 默认值 | 控件 |
|---|---|---|---|
toggleable可选 | 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 | |
variant可选 | The visual emphasis of the button. standardoutlinedtonalfilled | - | |
size可选 | The size of the button. smalllargeextra-smallmediumextra-large | - | |
shape可选 | The shape of the button. M3Shape | undefined | - | - |
width可选 | The width of the button. defaultnarrowwide | - | |
href可选 | The href attribute. If provided, the button will be rendered as an anchor element. string | undefined | - | |
icon可选 | Name of the icon. string | undefined | - | |
disabled可选 | Whether the button is disabled. boolean | undefined | undefined |
插槽1
| 名称 | 参数 | 说明 |
|---|---|---|
default | - | Default slot for the main content of the icon button. Receives `disabled` as a prop. |
样式254
| Token | 说明 |
|---|---|
--md-icon-button-container-colorColor回退值 var(--md-sys-color-primary) | Controls container color. |
--md-icon-button-container-heightLayout回退值 Size baseline + 2dp per density step; at least icon size + 8dp | Controls container height. |
--md-icon-button-container-shapeShape回退值 var(--md-icon-button-container-shape-round,var(--md-shape-action)) | Controls container shape. |
--md-icon-button-container-shape-roundShape回退值 var(--md-shape-action) | Controls container shape round. |
--md-icon-button-container-shape-squareShape回退值 var(--md-shape-action-square-small) | Controls container shape square. |
--md-icon-button-default-leading-spaceLayout回退值 0.5rem | Controls default leading space. |
--md-icon-button-default-trailing-spaceLayout回退值 0.5rem | Controls default trailing space. |
--md-icon-button-disabled-container-colorDisabled回退值 var(--md-sys-color-on-surface) | Controls disabled container color. |
--md-icon-button-disabled-container-opacityDisabled回退值 0.1 | Controls disabled container opacity. |
--md-icon-button-disabled-icon-colorDisabled回退值 var(--md-sys-color-on-surface) | Controls disabled icon color. |
--md-icon-button-disabled-icon-opacityDisabled回退值 0.38 | Controls disabled icon opacity. |
--md-icon-button-filled-container-colorColor回退值 var(--md-sys-color-primary) | Controls filled container color. |
--md-icon-button-filled-disabled-container-colorDisabled回退值 var(--md-sys-color-on-surface) | Controls filled disabled container color. |
--md-icon-button-filled-disabled-container-opacityDisabled回退值 0.1 | Controls filled disabled container opacity. |
--md-icon-button-filled-disabled-icon-colorDisabled回退值 var(--md-sys-color-on-surface) | Controls filled disabled icon color. |
--md-icon-button-filled-disabled-icon-opacityDisabled回退值 0.38 | Controls filled disabled icon opacity. |
--md-icon-button-filled-focused-icon-colorFocus回退值 var(--md-sys-color-on-primary) | Controls filled focused icon color. |
--md-icon-button-filled-focused-state-layer-colorFocus回退值 var(--md-sys-color-on-primary) | Controls filled focused state layer color. |
--md-icon-button-filled-focused-state-layer-opacityFocus回退值 var(--md-sys-state-focus-state-layer-opacity) | Controls filled focused state layer opacity. |
--md-icon-button-filled-hovered-icon-colorState回退值 var(--md-sys-color-on-primary) | Controls filled hovered icon color. |
--md-icon-button-filled-hovered-state-layer-colorState回退值 var(--md-sys-color-on-primary) | Controls filled hovered state layer color. |
--md-icon-button-filled-hovered-state-layer-opacityState回退值 var(--md-sys-state-hover-state-layer-opacity) | Controls filled hovered state layer opacity. |
--md-icon-button-filled-icon-colorColor回退值 var(--md-sys-color-on-primary) | Controls filled icon color. |
--md-icon-button-filled-pressed-icon-colorState回退值 var(--md-sys-color-on-primary) | Controls filled pressed icon color. |
--md-icon-button-filled-pressed-state-layer-colorState回退值 var(--md-sys-color-on-primary) | Controls filled pressed state layer color. |
--md-icon-button-filled-pressed-state-layer-opacityState回退值 var(--md-sys-state-pressed-state-layer-opacity) | Controls filled pressed state layer opacity. |
--md-icon-button-filled-selected-container-colorState回退值 var(--md-sys-color-primary) | Controls filled selected container color. |
--md-icon-button-filled-selected-focused-icon-colorFocus回退值 var(--md-sys-color-on-primary) | Controls filled selected focused icon color. |
--md-icon-button-filled-selected-focused-state-layer-colorFocus回退值 var(--md-sys-color-on-primary) | Controls filled selected focused state layer color. |
--md-icon-button-filled-selected-hovered-icon-colorState回退值 var(--md-sys-color-on-primary) | Controls filled selected hovered icon color. |
--md-icon-button-filled-selected-hovered-state-layer-colorState回退值 var(--md-sys-color-on-primary) | Controls filled selected hovered state layer color. |
--md-icon-button-filled-selected-icon-colorState回退值 var(--md-sys-color-on-primary) | Controls filled selected icon color. |
--md-icon-button-filled-selected-pressed-icon-colorState回退值 var(--md-sys-color-on-primary) | Controls filled selected pressed icon color. |
--md-icon-button-filled-selected-pressed-state-layer-colorState回退值 var(--md-sys-color-on-primary) | Controls filled selected pressed state layer color. |
--md-icon-button-filled-unselected-container-colorState回退值 var(--md-sys-color-surface-container) | Controls filled unselected container color. |
--md-icon-button-filled-unselected-focused-icon-colorFocus回退值 var(--md-sys-color-on-surface-variant) | Controls filled unselected focused icon color. |
--md-icon-button-filled-unselected-focused-state-layer-colorFocus回退值 var(--md-sys-color-on-surface-variant) | Controls filled unselected focused state layer color. |
--md-icon-button-filled-unselected-hovered-icon-colorState回退值 var(--md-sys-color-on-surface-variant) | Controls filled unselected hovered icon color. |
--md-icon-button-filled-unselected-hovered-state-layer-colorState回退值 var(--md-sys-color-on-surface-variant) | Controls filled unselected hovered state layer color. |
--md-icon-button-filled-unselected-icon-colorState回退值 var(--md-sys-color-on-surface-variant) | Controls filled unselected icon color. |
--md-icon-button-filled-unselected-pressed-icon-colorState回退值 var(--md-sys-color-on-surface-variant) | Controls filled unselected pressed icon color. |
--md-icon-button-filled-unselected-pressed-state-layer-colorState回退值 var(--md-sys-color-on-surface-variant) | Controls filled unselected pressed state layer color. |
--md-icon-button-focus-indicator-colorFocus回退值 var(--md-sys-color-secondary) | Controls focus indicator color. |
--md-icon-button-focus-indicator-outline-offsetFocus回退值 var(--md-sys-state-focus-indicator-outer-offset) | Controls focus indicator outline offset. |
--md-icon-button-focus-indicator-thicknessFocus回退值 var(--md-sys-state-focus-indicator-thickness) | Controls focus indicator thickness. |
--md-icon-button-focused-icon-colorFocus回退值 var(--md-sys-color-on-primary) | Controls focused icon color. |
--md-icon-button-focused-state-layer-colorFocus回退值 var(--md-sys-color-on-primary) | Controls focused state layer color. |
--md-icon-button-focused-state-layer-opacityFocus回退值 var(--md-sys-state-focus-state-layer-opacity) | Controls focused state layer opacity. |
--md-icon-button-hovered-icon-colorState回退值 var(--md-sys-color-on-primary) | Controls hovered icon color. |
--md-icon-button-hovered-state-layer-colorState回退值 var(--md-sys-color-on-primary) | Controls hovered state layer color. |
--md-icon-button-hovered-state-layer-opacityState回退值 var(--md-sys-state-hover-state-layer-opacity) | Controls hovered state layer opacity. |
--md-icon-button-icon-colorColor回退值 var(--md-sys-color-on-primary) | Controls icon color. |
--md-icon-button-icon-sizeLayout回退值 Size, density and icon scale (default reference: 1.5rem) | Controls icon size. |
--md-icon-button-large-container-heightLayout回退值 Size baseline + 2dp per density step; at least icon size + 8dp | Controls large container height. |
--md-icon-button-large-container-shape-roundShape回退值 var(--md-shape-action) | Controls large container shape round. |
--md-icon-button-large-container-shape-squareShape回退值 var(--md-shape-action-square-large) | Controls large container shape square. |
--md-icon-button-large-default-leading-spaceLayout回退值 2rem | Controls large default leading space. |
--md-icon-button-large-default-trailing-spaceLayout回退值 2rem | Controls large default trailing space. |
--md-icon-button-large-icon-sizeLayout回退值 Size, density and icon scale (default reference: 2rem) | Controls large icon size. |
--md-icon-button-large-narrow-leading-spaceLayout回退值 1rem | Controls large narrow leading space. |
--md-icon-button-large-narrow-trailing-spaceLayout回退值 1rem | Controls large narrow trailing space. |
--md-icon-button-large-outlined-outline-widthLayout回退值 0.125rem | Controls large outlined outline width. |
--md-icon-button-large-pressed-container-corner-size-motion-spring-dampingMotion回退值 var(--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回退值 var(--md-sys-motion-spring-fast-spatial-stiffness) | Controls large pressed container corner size motion spring stiffness. |
--md-icon-button-large-pressed-container-shapeShape回退值 var(--md-shape-action-pressed-large) | Controls large pressed container shape. |
--md-icon-button-large-selected-container-shape-roundShape回退值 var(--md-shape-action-selected-large) | Controls large selected container shape round. |
--md-icon-button-large-selected-container-shape-squareShape回退值 var(--md-shape-action) | Controls large selected container shape square. |
--md-icon-button-large-wide-leading-spaceLayout回退值 3rem | Controls large wide leading space. |
--md-icon-button-large-wide-trailing-spaceLayout回退值 3rem | Controls large wide trailing space. |
--md-icon-button-leading-spaceLayout回退值 var(--md-icon-button-default-leading-space,0.5rem) | Controls leading space. |
--md-icon-button-medium-container-heightLayout回退值 Size baseline + 2dp per density step; at least icon size + 8dp | Controls medium container height. |
--md-icon-button-medium-container-shape-roundShape回退值 var(--md-shape-action) | Controls medium container shape round. |
--md-icon-button-medium-container-shape-squareShape回退值 var(--md-shape-action-square-medium) | Controls medium container shape square. |
--md-icon-button-medium-default-leading-spaceLayout回退值 1rem | Controls medium default leading space. |
--md-icon-button-medium-default-trailing-spaceLayout回退值 1rem | Controls medium default trailing space. |
--md-icon-button-medium-icon-sizeLayout回退值 Size, density and icon scale (default reference: 1.5rem) | Controls medium icon size. |
--md-icon-button-medium-narrow-leading-spaceLayout回退值 0.75rem | Controls medium narrow leading space. |
--md-icon-button-medium-narrow-trailing-spaceLayout回退值 0.75rem | Controls medium narrow trailing space. |
--md-icon-button-medium-outlined-outline-widthLayout回退值 0.0625rem | Controls medium outlined outline width. |
--md-icon-button-medium-pressed-container-corner-size-motion-spring-dampingMotion回退值 var(--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回退值 var(--md-sys-motion-spring-fast-spatial-stiffness) | Controls medium pressed container corner size motion spring stiffness. |
--md-icon-button-medium-pressed-container-shapeShape回退值 var(--md-shape-action-pressed-medium) | Controls medium pressed container shape. |
--md-icon-button-medium-selected-container-shape-roundShape回退值 var(--md-shape-action-selected-medium) | Controls medium selected container shape round. |
--md-icon-button-medium-selected-container-shape-squareShape回退值 var(--md-shape-action) | Controls medium selected container shape square. |
--md-icon-button-medium-wide-leading-spaceLayout回退值 1.5rem | Controls medium wide leading space. |
--md-icon-button-medium-wide-trailing-spaceLayout回退值 1.5rem | Controls medium wide trailing space. |
--md-icon-button-narrow-leading-spaceLayout回退值 0.25rem | Controls narrow leading space. |
--md-icon-button-narrow-trailing-spaceLayout回退值 0.25rem | Controls narrow trailing space. |
--md-icon-button-outlined-disabled-icon-colorDisabled回退值 var(--md-sys-color-on-surface) | Controls outlined disabled icon color. |
--md-icon-button-outlined-disabled-icon-opacityDisabled回退值 0.38 | Controls outlined disabled icon opacity. |
--md-icon-button-outlined-disabled-outline-colorDisabled回退值 var(--md-sys-color-outline-variant) | Controls outlined disabled outline color. |
--md-icon-button-outlined-focused-icon-colorFocus回退值 var(--md-sys-color-on-surface-variant) | Controls outlined focused icon color. |
--md-icon-button-outlined-focused-state-layer-colorFocus回退值 var(--md-sys-color-on-surface-variant) | Controls outlined focused state layer color. |
--md-icon-button-outlined-focused-state-layer-opacityFocus回退值 var(--md-sys-state-focus-state-layer-opacity) | Controls outlined focused state layer opacity. |
--md-icon-button-outlined-hovered-icon-colorState回退值 var(--md-sys-color-on-surface-variant) | Controls outlined hovered icon color. |
--md-icon-button-outlined-hovered-state-layer-colorState回退值 var(--md-sys-color-on-surface-variant) | Controls outlined hovered state layer color. |
--md-icon-button-outlined-hovered-state-layer-opacityState回退值 var(--md-sys-state-hover-state-layer-opacity) | Controls outlined hovered state layer opacity. |
--md-icon-button-outlined-icon-colorColor回退值 var(--md-sys-color-on-surface-variant) | Controls outlined icon color. |
--md-icon-button-outlined-outline-colorColor回退值 var(--md-sys-color-outline-variant) | Controls outlined outline color. |
--md-icon-button-outlined-pressed-icon-colorState回退值 var(--md-sys-color-on-surface-variant) | Controls outlined pressed icon color. |
--md-icon-button-outlined-pressed-state-layer-colorState回退值 var(--md-sys-color-on-surface-variant) | Controls outlined pressed state layer color. |
--md-icon-button-outlined-pressed-state-layer-opacityState回退值 var(--md-sys-state-pressed-state-layer-opacity) | Controls outlined pressed state layer opacity. |
--md-icon-button-outlined-selected-container-colorState回退值 var(--md-sys-color-inverse-surface) | Controls outlined selected container color. |
--md-icon-button-outlined-selected-disabled-container-colorDisabled回退值 var(--md-sys-color-on-surface) | Controls outlined selected disabled container color. |
--md-icon-button-outlined-selected-disabled-container-opacityDisabled回退值 0.1 | Controls outlined selected disabled container opacity. |
--md-icon-button-outlined-selected-focused-icon-colorFocus回退值 var(--md-sys-color-inverse-on-surface) | Controls outlined selected focused icon color. |
--md-icon-button-outlined-selected-focused-state-layer-colorFocus回退值 var(--md-sys-color-inverse-on-surface) | Controls outlined selected focused state layer color. |
--md-icon-button-outlined-selected-hovered-icon-colorState回退值 var(--md-sys-color-inverse-on-surface) | Controls outlined selected hovered icon color. |
--md-icon-button-outlined-selected-hovered-state-layer-colorState回退值 var(--md-sys-color-inverse-on-surface) | Controls outlined selected hovered state layer color. |
--md-icon-button-outlined-selected-icon-colorState回退值 var(--md-sys-color-inverse-on-surface) | Controls outlined selected icon color. |
--md-icon-button-outlined-selected-pressed-icon-colorState回退值 var(--md-sys-color-inverse-on-surface) | Controls outlined selected pressed icon color. |
--md-icon-button-outlined-selected-pressed-state-layer-colorState回退值 var(--md-sys-color-inverse-on-surface) | Controls outlined selected pressed state layer color. |
--md-icon-button-outlined-unselected-disabled-outline-colorDisabled回退值 var(--md-sys-color-outline-variant) | Controls outlined unselected disabled outline color. |
--md-icon-button-outlined-unselected-focused-icon-colorFocus回退值 var(--md-sys-color-on-surface-variant) | Controls outlined unselected focused icon color. |
--md-icon-button-outlined-unselected-focused-state-layer-colorFocus回退值 var(--md-sys-color-on-surface-variant) | Controls outlined unselected focused state layer color. |
--md-icon-button-outlined-unselected-hovered-icon-colorState回退值 var(--md-sys-color-on-surface-variant) | Controls outlined unselected hovered icon color. |
--md-icon-button-outlined-unselected-hovered-state-layer-colorState回退值 var(--md-sys-color-on-surface-variant) | Controls outlined unselected hovered state layer color. |
--md-icon-button-outlined-unselected-icon-colorState回退值 var(--md-sys-color-on-surface-variant) | Controls outlined unselected icon color. |
--md-icon-button-outlined-unselected-outline-colorState回退值 var(--md-sys-color-outline-variant) | Controls outlined unselected outline color. |
--md-icon-button-outlined-unselected-pressed-icon-colorState回退值 var(--md-sys-color-on-surface-variant) | Controls outlined unselected pressed icon color. |
--md-icon-button-outlined-unselected-pressed-state-layer-colorState回退值 var(--md-sys-color-on-surface-variant) | Controls outlined unselected pressed state layer color. |
--md-icon-button-pressed-container-corner-size-motion-spring-dampingMotion回退值 var(--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回退值 var(--md-sys-motion-spring-fast-spatial-stiffness) | Controls pressed container corner size motion spring stiffness. |
--md-icon-button-pressed-container-shapeShape回退值 var(--md-shape-action-pressed-small) | Controls pressed container shape. |
--md-icon-button-pressed-icon-colorState回退值 var(--md-sys-color-on-primary) | Controls pressed icon color. |
--md-icon-button-pressed-state-layer-colorState回退值 var(--md-sys-color-on-primary) | Controls pressed state layer color. |
--md-icon-button-pressed-state-layer-opacityState回退值 var(--md-sys-state-pressed-state-layer-opacity) | Controls pressed state layer opacity. |
--md-icon-button-selected-container-colorState回退值 var(--md-sys-color-primary) | Controls selected container color. |
--md-icon-button-selected-container-shapeShape回退值 var(--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回退值 var(--md-shape-action-selected-small) | Controls selected container shape round. |
--md-icon-button-selected-container-shape-squareShape回退值 var(--md-shape-action) | Controls selected container shape square. |
--md-icon-button-selected-focused-icon-colorFocus回退值 var(--md-sys-color-on-primary) | Controls selected focused icon color. |
--md-icon-button-selected-focused-state-layer-colorFocus回退值 var(--md-sys-color-on-primary) | Controls selected focused state layer color. |
--md-icon-button-selected-hovered-icon-colorState回退值 var(--md-sys-color-on-primary) | Controls selected hovered icon color. |
--md-icon-button-selected-hovered-state-layer-colorState回退值 var(--md-sys-color-on-primary) | Controls selected hovered state layer color. |
--md-icon-button-selected-icon-colorState回退值 var(--md-sys-color-on-primary) | Controls selected icon color. |
--md-icon-button-selected-pressed-icon-colorState回退值 var(--md-sys-color-on-primary) | Controls selected pressed icon color. |
--md-icon-button-selected-pressed-state-layer-colorState回退值 var(--md-sys-color-on-primary) | Controls selected pressed state layer color. |
--md-icon-button-small-container-heightLayout回退值 Size baseline + 2dp per density step; at least icon size + 8dp | Controls small container height. |
--md-icon-button-small-container-shape-roundShape回退值 var(--md-shape-action) | Controls small container shape round. |
--md-icon-button-small-container-shape-squareShape回退值 var(--md-shape-action-square-small) | Controls small container shape square. |
--md-icon-button-small-default-leading-spaceLayout回退值 0.5rem | Controls small default leading space. |
--md-icon-button-small-default-trailing-spaceLayout回退值 0.5rem | Controls small default trailing space. |
--md-icon-button-small-icon-sizeLayout回退值 Size, density and icon scale (default reference: 1.5rem) | Controls small icon size. |
--md-icon-button-small-narrow-leading-spaceLayout回退值 0.25rem | Controls small narrow leading space. |
--md-icon-button-small-narrow-trailing-spaceLayout回退值 0.25rem | Controls small narrow trailing space. |
--md-icon-button-small-outlined-outline-widthLayout回退值 0.0625rem | Controls small outlined outline width. |
--md-icon-button-small-pressed-container-corner-size-motion-spring-dampingMotion回退值 var(--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回退值 var(--md-sys-motion-spring-fast-spatial-stiffness) | Controls small pressed container corner size motion spring stiffness. |
--md-icon-button-small-pressed-container-shapeShape回退值 var(--md-shape-action-pressed-small) | Controls small pressed container shape. |
--md-icon-button-small-selected-container-shape-roundShape回退值 var(--md-shape-action-selected-small) | Controls small selected container shape round. |
--md-icon-button-small-selected-container-shape-squareShape回退值 var(--md-shape-action) | Controls small selected container shape square. |
--md-icon-button-small-wide-leading-spaceLayout回退值 0.875rem | Controls small wide leading space. |
--md-icon-button-small-wide-trailing-spaceLayout回退值 0.875rem | Controls small wide trailing space. |
--md-icon-button-standard-disabled-icon-colorDisabled回退值 var(--md-sys-color-on-surface) | Controls standard disabled icon color. |
--md-icon-button-standard-disabled-icon-opacityDisabled回退值 0.38 | Controls standard disabled icon opacity. |
--md-icon-button-standard-focused-icon-colorFocus回退值 var(--md-sys-color-on-surface-variant) | Controls standard focused icon color. |
--md-icon-button-standard-focused-state-layer-colorFocus回退值 var(--md-sys-color-on-surface-variant) | Controls standard focused state layer color. |
--md-icon-button-standard-focused-state-layer-opacityFocus回退值 var(--md-sys-state-focus-state-layer-opacity) | Controls standard focused state layer opacity. |
--md-icon-button-standard-hovered-icon-colorState回退值 var(--md-sys-color-on-surface-variant) | Controls standard hovered icon color. |
--md-icon-button-standard-hovered-state-layer-colorState回退值 var(--md-sys-color-on-surface-variant) | Controls standard hovered state layer color. |
--md-icon-button-standard-hovered-state-layer-opacityState回退值 var(--md-sys-state-hover-state-layer-opacity) | Controls standard hovered state layer opacity. |
--md-icon-button-standard-icon-colorColor回退值 var(--md-sys-color-on-surface-variant) | Controls standard icon color. |
--md-icon-button-standard-pressed-icon-colorState回退值 var(--md-sys-color-on-surface-variant) | Controls standard pressed icon color. |
--md-icon-button-standard-pressed-state-layer-colorState回退值 var(--md-sys-color-on-surface-variant) | Controls standard pressed state layer color. |
--md-icon-button-standard-pressed-state-layer-opacityState回退值 var(--md-sys-state-pressed-state-layer-opacity) | Controls standard pressed state layer opacity. |
--md-icon-button-standard-selected-focused-icon-colorFocus回退值 var(--md-sys-color-primary) | Controls standard selected focused icon color. |
--md-icon-button-standard-selected-focused-state-layer-colorFocus回退值 var(--md-sys-color-primary) | Controls standard selected focused state layer color. |
--md-icon-button-standard-selected-hovered-icon-colorState回退值 var(--md-sys-color-primary) | Controls standard selected hovered icon color. |
--md-icon-button-standard-selected-hovered-state-layer-colorState回退值 var(--md-sys-color-primary) | Controls standard selected hovered state layer color. |
--md-icon-button-standard-selected-icon-colorState回退值 var(--md-sys-color-primary) | Controls standard selected icon color. |
--md-icon-button-standard-selected-pressed-icon-colorState回退值 var(--md-sys-color-primary) | Controls standard selected pressed icon color. |
--md-icon-button-standard-selected-pressed-state-layer-colorState回退值 var(--md-sys-color-primary) | Controls standard selected pressed state layer color. |
--md-icon-button-standard-unselected-focused-icon-colorFocus回退值 var(--md-sys-color-on-surface-variant) | Controls standard unselected focused icon color. |
--md-icon-button-standard-unselected-focused-state-layer-colorFocus回退值 var(--md-sys-color-on-surface-variant) | Controls standard unselected focused state layer color. |
--md-icon-button-standard-unselected-hovered-icon-colorState回退值 var(--md-sys-color-on-surface-variant) | Controls standard unselected hovered icon color. |
--md-icon-button-standard-unselected-hovered-state-layer-colorState回退值 var(--md-sys-color-on-surface-variant) | Controls standard unselected hovered state layer color. |
--md-icon-button-standard-unselected-icon-colorState回退值 var(--md-sys-color-on-surface-variant) | Controls standard unselected icon color. |
--md-icon-button-standard-unselected-pressed-icon-colorState回退值 var(--md-sys-color-on-surface-variant) | Controls standard unselected pressed icon color. |
--md-icon-button-standard-unselected-pressed-state-layer-colorState回退值 var(--md-sys-color-on-surface-variant) | Controls standard unselected pressed state layer color. |
--md-icon-button-tonal-container-colorColor回退值 var(--md-sys-color-secondary-container) | Controls tonal container color. |
--md-icon-button-tonal-disabled-container-colorDisabled回退值 var(--md-sys-color-on-surface) | Controls tonal disabled container color. |
--md-icon-button-tonal-disabled-container-opacityDisabled回退值 0.1 | Controls tonal disabled container opacity. |
--md-icon-button-tonal-disabled-icon-colorDisabled回退值 var(--md-sys-color-on-surface) | Controls tonal disabled icon color. |
--md-icon-button-tonal-disabled-icon-opacityDisabled回退值 0.38 | Controls tonal disabled icon opacity. |
--md-icon-button-tonal-focused-icon-colorFocus回退值 var(--md-sys-color-on-secondary-container) | Controls tonal focused icon color. |
--md-icon-button-tonal-focused-state-layer-colorFocus回退值 var(--md-sys-color-on-secondary-container) | Controls tonal focused state layer color. |
--md-icon-button-tonal-focused-state-layer-opacityFocus回退值 var(--md-sys-state-focus-state-layer-opacity) | Controls tonal focused state layer opacity. |
--md-icon-button-tonal-hovered-icon-colorState回退值 var(--md-sys-color-on-secondary-container) | Controls tonal hovered icon color. |
--md-icon-button-tonal-hovered-state-layer-colorState回退值 var(--md-sys-color-on-secondary-container) | Controls tonal hovered state layer color. |
--md-icon-button-tonal-hovered-state-layer-opacityState回退值 var(--md-sys-state-hover-state-layer-opacity) | Controls tonal hovered state layer opacity. |
--md-icon-button-tonal-icon-colorColor回退值 var(--md-sys-color-on-secondary-container) | Controls tonal icon color. |
--md-icon-button-tonal-pressed-icon-colorState回退值 var(--md-sys-color-on-secondary-container) | Controls tonal pressed icon color. |
--md-icon-button-tonal-pressed-state-layer-colorState回退值 var(--md-sys-color-on-secondary-container) | Controls tonal pressed state layer color. |
--md-icon-button-tonal-pressed-state-layer-opacityState回退值 var(--md-sys-state-pressed-state-layer-opacity) | Controls tonal pressed state layer opacity. |
--md-icon-button-tonal-selected-container-colorState回退值 var(--md-sys-color-secondary) | Controls tonal selected container color. |
--md-icon-button-tonal-selected-focused-icon-colorFocus回退值 var(--md-sys-color-on-secondary) | Controls tonal selected focused icon color. |
--md-icon-button-tonal-selected-focused-state-layer-colorFocus回退值 var(--md-sys-color-on-secondary) | Controls tonal selected focused state layer color. |
--md-icon-button-tonal-selected-hovered-icon-colorState回退值 var(--md-sys-color-on-secondary) | Controls tonal selected hovered icon color. |
--md-icon-button-tonal-selected-hovered-state-layer-colorState回退值 var(--md-sys-color-on-secondary) | Controls tonal selected hovered state layer color. |
--md-icon-button-tonal-selected-icon-colorState回退值 var(--md-sys-color-on-secondary) | Controls tonal selected icon color. |
--md-icon-button-tonal-selected-pressed-icon-colorState回退值 var(--md-sys-color-on-secondary) | Controls tonal selected pressed icon color. |
--md-icon-button-tonal-selected-pressed-state-layer-colorState回退值 var(--md-sys-color-on-secondary) | Controls tonal selected pressed state layer color. |
--md-icon-button-tonal-unselected-container-colorState回退值 var(--md-sys-color-secondary-container) | Controls tonal unselected container color. |
--md-icon-button-tonal-unselected-focused-icon-colorFocus回退值 var(--md-sys-color-on-secondary-container) | Controls tonal unselected focused icon color. |
--md-icon-button-tonal-unselected-focused-state-layer-colorFocus回退值 var(--md-sys-color-on-secondary-container) | Controls tonal unselected focused state layer color. |
--md-icon-button-tonal-unselected-hovered-icon-colorState回退值 var(--md-sys-color-on-secondary-container) | Controls tonal unselected hovered icon color. |
--md-icon-button-tonal-unselected-hovered-state-layer-colorState回退值 var(--md-sys-color-on-secondary-container) | Controls tonal unselected hovered state layer color. |
--md-icon-button-tonal-unselected-icon-colorState回退值 var(--md-sys-color-on-secondary-container) | Controls tonal unselected icon color. |
--md-icon-button-tonal-unselected-pressed-icon-colorState回退值 var(--md-sys-color-on-secondary-container) | Controls tonal unselected pressed icon color. |
--md-icon-button-tonal-unselected-pressed-state-layer-colorState回退值 var(--md-sys-color-on-secondary-container) | Controls tonal unselected pressed state layer color. |
--md-icon-button-trailing-spaceLayout回退值 var(--md-icon-button-default-trailing-space,0.5rem) | Controls trailing space. |
--md-icon-button-unselected-container-colorState回退值 var(--md-sys-color-surface-container) | Controls unselected container color. |
--md-icon-button-unselected-focused-icon-colorFocus回退值 var(--md-sys-color-on-surface-variant) | Controls unselected focused icon color. |
--md-icon-button-unselected-focused-state-layer-colorFocus回退值 var(--md-sys-color-on-surface-variant) | Controls unselected focused state layer color. |
--md-icon-button-unselected-hovered-icon-colorState回退值 var(--md-sys-color-on-surface-variant) | Controls unselected hovered icon color. |
--md-icon-button-unselected-hovered-state-layer-colorState回退值 var(--md-sys-color-on-surface-variant) | Controls unselected hovered state layer color. |
--md-icon-button-unselected-icon-colorState回退值 var(--md-sys-color-on-surface-variant) | Controls unselected icon color. |
--md-icon-button-unselected-pressed-icon-colorState回退值 var(--md-sys-color-on-surface-variant) | Controls unselected pressed icon color. |
--md-icon-button-unselected-pressed-state-layer-colorState回退值 var(--md-sys-color-on-surface-variant) | Controls unselected pressed state layer color. |
--md-icon-button-wide-leading-spaceLayout回退值 0.875rem | Controls wide leading space. |
--md-icon-button-wide-trailing-spaceLayout回退值 0.875rem | Controls wide trailing space. |
--md-icon-button-xlarge-container-heightLayout回退值 Size baseline + 2dp per density step; at least icon size + 8dp | Controls xlarge container height. |
--md-icon-button-xlarge-container-shape-roundShape回退值 var(--md-shape-action) | Controls xlarge container shape round. |
--md-icon-button-xlarge-container-shape-squareShape回退值 var(--md-shape-action-square-large) | Controls xlarge container shape square. |
--md-icon-button-xlarge-default-leading-spaceLayout回退值 3rem | Controls xlarge default leading space. |
--md-icon-button-xlarge-default-trailing-spaceLayout回退值 3rem | Controls xlarge default trailing space. |
--md-icon-button-xlarge-icon-sizeLayout回退值 Size, density and icon scale (default reference: 2.5rem) | Controls xlarge icon size. |
--md-icon-button-xlarge-narrow-leading-spaceLayout回退值 2rem | Controls xlarge narrow leading space. |
--md-icon-button-xlarge-narrow-trailing-spaceLayout回退值 2rem | Controls xlarge narrow trailing space. |
--md-icon-button-xlarge-outlined-outline-widthLayout回退值 0.1875rem | Controls xlarge outlined outline width. |
--md-icon-button-xlarge-pressed-container-corner-size-motion-spring-dampingMotion回退值 var(--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回退值 var(--md-sys-motion-spring-fast-spatial-stiffness) | Controls xlarge pressed container corner size motion spring stiffness. |
--md-icon-button-xlarge-pressed-container-shapeShape回退值 var(--md-shape-action-pressed-large) | Controls xlarge pressed container shape. |
--md-icon-button-xlarge-selected-container-shape-roundShape回退值 var(--md-shape-action-selected-large) | Controls xlarge selected container shape round. |
--md-icon-button-xlarge-selected-container-shape-squareShape回退值 var(--md-shape-action) | Controls xlarge selected container shape square. |
--md-icon-button-xlarge-wide-leading-spaceLayout回退值 4.5rem | Controls xlarge wide leading space. |
--md-icon-button-xlarge-wide-trailing-spaceLayout回退值 4.5rem | Controls xlarge wide trailing space. |
--md-icon-button-xsmall-container-heightLayout回退值 Size baseline + 2dp per density step; at least icon size + 8dp | Controls xsmall container height. |
--md-icon-button-xsmall-container-shape-roundShape回退值 var(--md-shape-action) | Controls xsmall container shape round. |
--md-icon-button-xsmall-container-shape-squareShape回退值 var(--md-shape-action-square-small) | Controls xsmall container shape square. |
--md-icon-button-xsmall-default-leading-spaceLayout回退值 0.375rem | Controls xsmall default leading space. |
--md-icon-button-xsmall-default-trailing-spaceLayout回退值 0.375rem | Controls xsmall default trailing space. |
--md-icon-button-xsmall-icon-sizeLayout回退值 Size, density and icon scale (default reference: 1.25rem) | Controls xsmall icon size. |
--md-icon-button-xsmall-narrow-leading-spaceLayout回退值 0.25rem | Controls xsmall narrow leading space. |
--md-icon-button-xsmall-narrow-trailing-spaceLayout回退值 0.25rem | Controls xsmall narrow trailing space. |
--md-icon-button-xsmall-outlined-outline-widthLayout回退值 0.0625rem | Controls xsmall outlined outline width. |
--md-icon-button-xsmall-pressed-container-corner-size-motion-spring-dampingMotion回退值 var(--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回退值 var(--md-sys-motion-spring-fast-spatial-stiffness) | Controls xsmall pressed container corner size motion spring stiffness. |
--md-icon-button-xsmall-pressed-container-shapeShape回退值 var(--md-shape-action-pressed-small) | Controls xsmall pressed container shape. |
--md-icon-button-xsmall-selected-container-shape-roundShape回退值 var(--md-shape-action-selected-small) | Controls xsmall selected container shape round. |
--md-icon-button-xsmall-selected-container-shape-squareShape回退值 var(--md-shape-action) | Controls xsmall selected container shape square. |
--md-icon-button-xsmall-wide-leading-spaceLayout回退值 0.625rem | Controls xsmall wide leading space. |
--md-icon-button-xsmall-wide-trailing-spaceLayout回退值 0.625rem | Controls xsmall wide trailing space. |