图标按钮

操作按钮

交互式演示

属性

名称 类型 默认值 描述
size 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' 'small' 图标按钮的尺寸。
variant 'filled' | 'tonal' | 'outlined' | 'text' 'text' 图标按钮的视觉样式变体。
width 'standard' | 'narrow' | 'wide' 'standard' 图标按钮的宽度变体。

类型

<md-icon-button variant="filled"
  ><iconify-icon icon="material-symbols:settings"></iconify-icon
></md-icon-button>
<md-icon-button variant="tonal"
  ><iconify-icon icon="material-symbols:settings"></iconify-icon
></md-icon-button>
<md-icon-button variant="outlined"
  ><iconify-icon icon="material-symbols:settings"></iconify-icon
></md-icon-button>
<md-icon-button variant="text"
  ><iconify-icon icon="material-symbols:settings"></iconify-icon
></md-icon-button>

切换按钮

图标按钮可用于在两种状态之间进行选择。

交互式演示

属性

名称 类型 默认值 描述
size 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' 'small' 图标按钮切换的尺寸。
variant 'filled' | 'tonal' | 'outlined' | 'text' 'text' 图标按钮切换的视觉样式变体。
width 'standard' | 'narrow' | 'wide' 'standard' 图标按钮切换的宽度变体。

类型

<md-icon-button-toggle variant="filled">
  <iconify-icon icon="material-symbols:favorite-outline"></iconify-icon>
  <iconify-icon slot="checked" icon="material-symbols:favorite"></iconify-icon>
</md-icon-button-toggle>
<md-icon-button-toggle variant="tonal">
  <iconify-icon icon="material-symbols:favorite-outline"></iconify-icon>
  <iconify-icon slot="checked" icon="material-symbols:favorite"></iconify-icon>
</md-icon-button-toggle>
<md-icon-button-toggle variant="outlined">
  <iconify-icon icon="material-symbols:favorite-outline"></iconify-icon>
  <iconify-icon slot="checked" icon="material-symbols:favorite"></iconify-icon>
</md-icon-button-toggle>
<md-icon-button-toggle variant="text">
  <iconify-icon icon="material-symbols:favorite-outline"></iconify-icon>
  <iconify-icon slot="checked" icon="material-symbols:favorite"></iconify-icon>
</md-icon-button-toggle>