Component reference

Icon Button

Material 3 Expressive Icon Button component with press animations and multiple variants.

Material 3Web ComponentFramework agnostic

Standard

settings

more_vert

<m3-icon-button aria-label="Settings">
  <span class="material-symbols-outlined">settings</span>
</m3-icon-button>

Filled

add

edit

delete

<m3-icon-button variant="filled" aria-label="Add">
  <span class="material-symbols-outlined">add</span>
</m3-icon-button>

Tonal

favorite

bookmark

<m3-icon-button variant="tonal" aria-label="Favorite">
  <span class="material-symbols-outlined">favorite</span>
</m3-icon-button>

Outlined

filter_list

sort

<m3-icon-button variant="outlined" aria-label="Menu">
  <span class="material-symbols-outlined">menu</span>
</m3-icon-button>

Toggle

bookmark

favorite

notifications

<m3-icon-button toggle aria-label="Bookmark">
  <span class="material-symbols-outlined">bookmark</span>
</m3-icon-button>

Sizes

<m3-icon-button size="small" aria-label="Close">
  <span class="material-symbols-outlined">close</span>
</m3-icon-button>
<m3-icon-button aria-label="Close">
  <span class="material-symbols-outlined">close</span>
</m3-icon-button>
<m3-icon-button size="large" aria-label="Close">
  <span class="material-symbols-outlined">close</span>
</m3-icon-button>