Icon button

Action Button

Follows: Icon Buttons - Material Design 3
Inherits: Button

Interactive Demo

settings

Size

xsmall

small

medium

large

xlarge

Variant

filled

tonal

outlined

text

Width

standard

narrow

wide

Disabled

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.
`type`	`'button' \| 'submit' \| 'reset'`	`'button'`	The button type (inherited from `Button`).
`disabled`	Boolean	`false`	Whether the icon button is disabled (inherited from `FormAssociated`).

Methods

Inherits all standard HTMLElement methods. Use click() to programmatically trigger the button.

Types

settings

<md-icon-button variant="filled"><md-icon>settings</md-icon></md-icon-button>
<md-icon-button variant="tonal"><md-icon>settings</md-icon></md-icon-button>
<md-icon-button variant="outlined"><md-icon>settings</md-icon></md-icon-button>
<md-icon-button variant="text"><md-icon>settings</md-icon></md-icon-button>

Toggle Button

Inherits: Switch

Icon buttons can be used to select between two states.

Interactive Demo

favorite

Variant

filled

tonal

outlined

text

Size

xsmall

small

medium

large

xlarge

Width

standard

narrow

wide

Disabled

Properties

Name	Type	Default	Description
`checked`	Boolean	`false`	Whether the icon button is in the checked state (inherited from `Switch`).
`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.
`disabled`	Boolean	`false`	Whether the icon button toggle is disabled (inherited from `FormAssociated`).

Events

Name	Type	Description
`change`	`CustomEvent<boolean>`	Dispatched when the checked state changes. The `detail` property contains the new checked state.

Types

favorite

<md-icon-button-toggle variant="filled">
  <md-icon>favorite</md-icon>
  <md-icon slot="checked" style="font-variation-settings: 'FILL' 1">favorite</md-icon>
</md-icon-button-toggle>
<md-icon-button-toggle variant="tonal">
  <md-icon>favorite</md-icon>
  <md-icon slot="checked" style="font-variation-settings: 'FILL' 1">favorite</md-icon>
</md-icon-button-toggle>
<md-icon-button-toggle variant="outlined">
  <md-icon>favorite</md-icon>
  <md-icon slot="checked" style="font-variation-settings: 'FILL' 1">favorite</md-icon>
</md-icon-button-toggle>
<md-icon-button-toggle variant="text">
  <md-icon>favorite</md-icon>
  <md-icon slot="checked" style="font-variation-settings: 'FILL' 1">favorite</md-icon>
</md-icon-button-toggle>