Icon buttons help people take supplementary actions with a single tap.
Use icon buttons when a compact button is required, such as in a toolbar or image list.
There are two types of icon buttons: standard and contained.
- Design article
- API Documentation (coming soon)
- Source code
Use icon buttons to display actions in a compact layout. Icon buttons can represent opening actions such as opening an overflow menu or search, or represent binary actions that can be toggled on and off, such as favorite or bookmark.
Icon buttons can be grouped together or they can stand alone.
To use icons by name, see the Icon documentation for loading the icon font.
<md-standard-icon-button>check</md-standard-icon-button>
<md-filled-icon-button>check</md-filled-icon-button>
<md-filled-tonal-icon-button>check</md-filled-tonal-icon-button>
<md-outlined-icon-button>check</md-outlined-icon-button>Add an
href
and optionally a
target
attribute to turn the icon button into a link.
<md-standard-icon-button href="https://google.com">check</md-standard-icon-button>
Toggle icon buttons allow a single choice to be selected or deselected, such as adding or removing something from favorites.
<div>
<md-standard-icon-button toggle>
<span>close</span>
<span slot="selectedIcon">check</span>
</md-standard-icon-button>
<md-filled-icon-button toggle>
<span>close</span>
<span slot="selectedIcon">check</span>
</md-filled-icon-button>
<md-filled-tonal-icon-button toggle>
<span>close</span>
<span slot="selectedIcon">check</span>
</md-filled-tonal-icon-button>
<md-outlined-icon-button toggle>
<span>close</span>
<span slot="selectedIcon">check</span>
</md-outlined-icon-button>
</div>
<div>
<md-standard-icon-button toggle selected>
<span>close</span>
<span slot="selectedIcon">check</span>
</md-standard-icon-button>
<md-filled-icon-button toggle selected>
<span>close</span>
<span slot="selectedIcon">check</span>
</md-filled-icon-button>
<md-filled-tonal-icon-button toggle selected>
<span>close</span>
<span slot="selectedIcon">check</span>
</md-filled-tonal-icon-button>
<md-outlined-icon-button toggle selected>
<span>close</span>
<span slot="selectedIcon">check</span>
</md-outlined-icon-button>
</div>Add an
aria-label
attribute to buttons whose labels need a more descriptive label.
<md-standard-icon-button aria-label="Search for Contact">search</md-standard-icon-button>Add a selected-aria-label attribute to toggle buttons whose labels need a more
descriptive label when selected.
<md-standard-icon-button toggle
aria-label="Unselected"
selected-aria-label="Selected">
<span>close</span>
<span slot="selectedIcon">check</span>
</md-standard-icon-button>Use icon buttons to display actions in a compact layout. Icon buttons can represent opening actions such as opening an overflow menu or search, or represent binary actions that can be toggled on and off, such as favorite or bookmark.
Icon buttons can be grouped together or they can stand alone.
<md-standard-icon-button>check</md-standard-icon-button>
Filled icon buttons have higher visual impact and are best for high emphasis actions.
<md-filled-icon-button>check</md-filled-icon-button>
Filled tonal icon buttons are a middle ground between filled and outlined icon buttons. They're useful in contexts where the button requires slightly more emphasis than an outline would give, such as a secondary action paired with a high emphasis action.
<md-filled-tonal-icon-button>check</md-filled-tonal-icon-button>
Outlined icon buttons are medium-emphasis buttons. They're useful when an icon button needs more emphasis than a standard icon button but less than a filled or filled tonal icon button.
<md-outlined-icon-button>check</md-outlined-icon-button>Icon Button supports Material theming and can be customized in terms of color, and shape.
| Token | Default value |
|---|---|
--md-icon-button-unselected-icon-color |
--md-sys-color-on-surface-variant |
--md-icon-button-state-layer-shape |
9999px |
--md-icon-button-icon-size |
24px |
<style>
:root {
--md-icon-button-icon-size: 32px;
--md-sys-color-on-surface-variant: #dc362e;
}
</style>
<md-standard-icon-button></md-standard-icon-button>| Token | Default value |
|---|---|
--md-filled-icon-button-selected-container-color |
--md-sys-color-primary |
--md-filled-icon-button-container-shape |
9999px |
--md-filled-icon-button-container-size |
40px |
--md-filled-icon-button-icon-size |
24px |
<style>
:root {
--md-filled-icon-button-container-size: 80px;
--md-filled-icon-button-icon-size: 40px;
--md-filled-icon-button-container-shape: 0px;
--md-sys-color-primary: #dc362e;
}
</style>
<md-filled-icon-button></md-filled-icon-button>| Token | Default value |
|---|---|
--md-filled-tonal-icon-button-selected-container-color |
--md-sys-color-secondary-container |
--md-filled-tonal-icon-button-container-shape |
9999px |
--md-filled-tonal-icon-button-container-size |
40px |
--md-filled-tonal-icon-button-icon-size |
24px |
<style>
:root {
--md-filled-tonal-icon-button-container-size: 80px;
--md-filled-tonal-icon-button-container-shape: 0px;
--md-filled-tonal-icon-button-icon-size: 40px;
--md-sys-color-secondary-container: #006A6A;
}
</style>
<md-filled-tonal-icon-button></md-filled-tonal-icon-button>| Token | Default value |
|---|---|
--md-outlined-icon-button-unselected-outline-color |
--md-sys-color-outline |
--md-outlined-icon-button-unselected-outline-width |
1px |
--md-outlined-icon-button-container-shape |
9999px |
--md-outlined-icon-button-container-size |
40px |
--md-outlined-icon-button-icon-size |
24px |
<style>
:root {
--md-outlined-icon-button-container-size: 80px;
--md-outlined-icon-button-container-shape: 0px;
--md-outlined-icon-button-icon-size: 40px;
--md-outlined-icon-button-unselected-outline-width: 4px;
--md-sys-color-outline: #006A6A;
}
</style>
<md-outlined-icon-button></md-outlined-icon-button>