Icon button

Action Button

Interactive Demo

Properties

Name Type Default Description
size 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' 'small' The size of the icon button.
variant 'filled' | 'tonal' | 'outlined' | 'text' 'text' The visual style variant of the icon button.
width 'standard' | 'narrow' | 'wide' 'standard' The width variant of the icon button.

Types

<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>

Toggle Button

Icon buttons can be used to select between two states.

Interactive Demo

Properties

Name Type Default Description
size 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' 'small' The size of the icon button toggle.
variant 'filled' | 'tonal' | 'outlined' | 'text' 'text' The visual style variant of the icon button toggle.
width 'standard' | 'narrow' | 'wide' 'standard' The width variant of the icon button toggle.

Types

<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>