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


<mc-icon-button toggle>
  <mc-icon style="font-family: Material Symbols Outlined alt">favorite</mc-icon>
</mc-icon-button>


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


<mc-icon-button checked onchange=console.log(this.checked) outlined toggle>
  <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);