Home
View source code
Set direction to right-to-left
Change language
Change theme
Icon button
| 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. |
<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>
Icon buttons can be used to select between two states.
| 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. |
<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>