Icons visually communicate the button’s action. Their meaning should be clear and unambiguous. Icon buttons can be grouped together or they can stand alone.

• Icon buttons can take the form of a wide range of system icons.
• Ensure the meaning of the icon is unambiguous.
• On hover, include a tooltip that describes the button’s action, rather than the name of the icon itself.
• Use the outline-style icons to indicate an unselected state and a filled style to indicate selection.

Preview

Installation

To import just the component styles, copy the following into your project’s styles.css file:

/* Core Styles */
@import url('https://kherrick.github.io/material-design-lite/css/core.css');
/* Material Icons */
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
/* Roboto Font */
@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap');
/* Component Styles */
@import url('https://kherrick.github.io/material-design-lite/css/components/icon-button/style.css');

Usage

Start with a button or div element and add the icon-button class name:

<button class="icon-button"></button>

Variants

Default

Default icon styling.

<button class="icon-button">
  <i class="material-icons">add</i>
</button>

Filled

Filled icon buttons have higher visual impact and are best for high emphasis actions.

<button class="icon-button filled">
  <i class="material-icons">add</i>
</button>

Filled Tonal

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.

<button class="icon-button filled-tonal">
  <i class="material-icons">add</i>
</button>

Outlined

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.

<button class="icon-button outlined">
  <i class="material-icons">add</i>
</button>

Toggle

Toggle icon styling.

<button class="icon-button toggle">
  <i class="material-icons">add</i>
</button>

To show the checked state, add the checked class name or checked attribute to the button.

<button class="icon-button toggle checked">
  <i class="material-icons">add</i>
</button>

Toggle Input

Toggle icon styling for input elements.

<input class="icon-button toggle" type="checkbox" aria-label="toggle input" />

For custom icons, use the off-icon and on-icon attributes.

<input class="icon-button toggle" type="checkbox" off-icon="favorite_outline" on-icon="favorite" aria-label="toggle input" />

Toggle Filled

Toggle filled icon styling.

<input class="icon-button toggle filled" type="checkbox" aria-label="toggle input" />

Toggle Filled Tonal

Toggle filled tonal icon styling.

<input class="icon-button toggle filled-tonal" type="checkbox" aria-label="toggle input" />

Design Tokens

Resources

• ARIA Resources
• MDN
• Material Design