Icon buttons

Example

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

favorite

<mc-icon-button>
  <mc-icon>favorite</mc-icon>
</mc-icon-button>

<mc-icon-button>
  <mc-icon filled>favorite</mc-icon>
</mc-icon-button>

<mc-icon-button filled>
  <mc-icon>favorite</mc-icon>
</mc-icon-button>

<mc-icon-button filled-tonal>
  <mc-icon>favorite</mc-icon>
</mc-icon-button>

<mc-icon-button outlined>
  <mc-icon>favorite</mc-icon>
</mc-icon-button>

<mc-icon-button outlined>
  <mc-icon filled>favorite</mc-icon>
</mc-icon-button>

Icon toggle button

If not using a variable icon, then the toggle state will not change between outlined and filled

favorite

settings

favorite

settings

<!-- Toggle with single icon will change the fill state -->
<mc-icon-button toggle>
  <mc-icon style="font-family: Material Symbols Outlined alt">favorite</mc-icon>
</mc-icon-button>

<!-- Toggle with second icon filled -->
<mc-icon-button toggle filled>
  <mc-icon style="font-family: Material Symbols Outlined alt">favorite</mc-icon>
  <mc-icon slot="selected">settings</mc-icon>
</mc-icon-button>

<!-- Toggle with second icon checked outlined -->
<mc-icon-button toggle outlined checked onchange="console.log(this.checked)">
  <mc-icon style="font-family: Material Symbols Outlined alt">favorite</mc-icon>
  <mc-icon slot="selected">settings</mc-icon>
</mc-icon-button>

Style

CSS variables that allow you override default values

/* Optional variables for overriding */
  
--mc-icon-button-icon-color: var(--mc-on-surface-variant);
--mc-icon-button-toggle-icon-selected-color: var(--mc-primary);
--mc-icon-button-icon-filled-color: var(--mc-on-primary);
--mc-icon-button-toggle-icon-filled-color: var(--mc-primary);
--mc-icon-button-toggle-icon-filled-selected-color: var(--mc-on-primary);
--mc-icon-button-icon-filled-tonal-color: var(--mc-on-secondary-container);
--mc-icon-button-toggle-icon-filled-tonal-color: var(--mc-on-surface-variant);
--mc-icon-button-toggle-icon-filled-tonal-selected-color: var(--mc-on-secondary-container);
--mc-icon-button-background-filled-color: var(--mc-primary);
--mc-icon-button-toggle-background-filled-color: var(--mc-surface-container-highest);
--mc-icon-button-toggle-background-filled-selected-color: var(--mc-primary);
--mc-icon-button-background-filled-tonal-color: var(--mc-secondary-container);
--mc-icon-button-toggle-background-filled-tonal-color: var(--mc-surface-container-highest);
--mc-icon-button-toggle-background-filled-tonal-selected-color: var(--mc-secondary-container);
--mc-icon-button-outline-color: var(--mc-outline);