Icon Buttons

This documentation is fully rendered on the Material Web catalog.

Icon buttons help people take supplementary actions with a single tap.

The top half of a phone application with a back icon button at the top left and three icon buttons on the top right, heart, share, and three dot.

View interactive demo inline.

Open interactive demo in new tab.

favoritebookmarkbookmark
1
videocamsettingsmore_vert
2
  1. Icon Button
  2. Filled Icon Button
  3. Filled Tonal Icon Button
  4. Outlined 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.

To use icons by name, see the Icon documentation for loading the icon font.

checkcheckcheckcheck
<md-icon-button>
  <md-icon>check</md-icon>
</md-icon-button>
<md-filled-icon-button>
  <md-icon>check</md-icon>
</md-filled-icon-button>
<md-filled-tonal-icon-button>
  <md-icon>check</md-icon>
</md-filled-tonal-icon-button>
<md-outlined-icon-button>
  <md-icon>check</md-icon>
</md-outlined-icon-button>

Add an href and optionally a target attribute to turn the icon button into a link.

<md-icon-button href="https://google.com">
  <md-icon>check</md-icon>
</md-icon-button>
closecheckclosecheckclosecheckclosecheck
closecheckclosecheckclosecheckclosecheck

Toggle icon buttons allow a single choice to be selected or deselected, such as adding or removing something from favorites.

Add a second icon in the slot="selected" slot to change the icon when selected. Toggle icon buttons can be pre-selected by adding the selected attribute.

<div>
  <md-icon-button toggle>
    <md-icon>close</md-icon>
    <md-icon slot="selected">check</md-icon>
  </md-icon-button>
  <md-filled-icon-button toggle>
    <md-icon>close</md-icon>
    <md-icon slot="selected">check</md-icon>
  </md-filled-icon-button>
  <md-filled-tonal-icon-button toggle>
    <md-icon>close</md-icon>
    <md-icon slot="selected">check</md-icon>
  </md-filled-tonal-icon-button>
  <md-outlined-icon-button toggle>
    <md-icon>close</md-icon>
    <md-icon slot="selected">check</md-icon>
  </md-outlined-icon-button>
</div>
<div>
  <md-icon-button toggle selected>
    <md-icon>close</md-icon>
    <md-icon slot="selected">check</md-icon>
  </md-icon-button>
  <md-filled-icon-button toggle selected>
    <md-icon>close</md-icon>
    <md-icon slot="selected">check</md-icon>
  </md-filled-icon-button>
  <md-filled-tonal-icon-button toggle selected>
    <md-icon>close</md-icon>
    <md-icon slot="selected">check</md-icon>
  </md-filled-tonal-icon-button>
  <md-outlined-icon-button toggle selected>
    <md-icon>close</md-icon>
    <md-icon slot="selected">check</md-icon>
  </md-outlined-icon-button>
</div>

Add an aria-label attribute to icon buttons whose labels need a more descriptive label.

<md-icon-button aria-label="Search for Contact">
  <md-icon>search</md-icon>
</md-icon-button>

Add an aria-label-selected attribute to toggle buttons whose labels need a more descriptive label when selected.

<md-icon-button toggle
  aria-label="Unselected"
  aria-label-selected="Selected">
  <md-icon>close</md-icon>
  <md-icon slot="selected">check</md-icon>
</md-icon-button>

By default, disabled icon buttons are not focusable with the keyboard, while "soft-disabled" icon buttons are. Some use cases encourage focusability of disabled toolbar items to increase their discoverability.

See the ARIA guidelines on focusability of disabled controls for guidance on when this is recommended.

<div role="toolbar">
  <md-icon-button aria-label="Copy">
    <md-icon>copy</md-icon>
  </md-icon-button>
  <md-icon-button aria-label="Cut">
    <md-icon>cut</md-icon>
  </md-icon-button>
  <!--
    This icon button is disabled but kept focusable to improve its
    discoverability in the toolbar.
  -->
  <md-icon-button aria-label="Paste" soft-disabled>
    <md-icon>paste</md-icon>
  </md-icon-button>
</div>

Standard icon buttons do not have a background or outline, and have the lowest emphasis of the icon buttons.

check
<md-icon-button>
  <md-icon>check</md-icon>
</md-icon-button>
check

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

<md-filled-icon-button>
  <md-icon>check</md-icon>
</md-filled-icon-button>
check

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>
  <md-icon>check</md-icon>
</md-filled-tonal-icon-button>
check

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>
  <md-icon>check</md-icon>
</md-outlined-icon-button>

Icon Button supports Material theming and can be customized in terms of color, and shape.

TokenDefault value
--md-icon-button-icon-color--md-sys-color-on-surface-variant
--md-icon-button-state-layer-shape--md-sys-shape-corner-full
--md-icon-button-icon-size24px
check
<style>
:root {
  --md-icon-button-icon-size: 32px;
  --md-sys-color-on-surface-variant: #dc362e;
  background-color: #fff8f6;
}
</style>

<md-icon-button>
  <md-icon>check</md-icon>
</md-icon-button>
TokenDefault value
--md-filled-icon-button-selected-container-color--md-sys-color-primary
--md-filled-icon-button-container-shape--md-sys-shape-corner-full
--md-filled-icon-button-container-width40px
--md-filled-icon-button-container-height40px
--md-filled-icon-button-icon-size24px
check
<style>
:root {
  --md-filled-icon-button-container-width: 80px;
  --md-filled-icon-button-container-height: 80px;
  --md-filled-icon-button-icon-size: 40px;
  --md-filled-icon-button-container-shape: 0px;
  --md-sys-color-primary: #dc362e;
  background-color: #fff8f6;
}
</style>
<md-filled-icon-button>
  <md-icon>check</md-icon>
</md-filled-icon-button>
TokenDefault value
--md-filled-tonal-icon-button-selected-container-color--md-sys-color-secondary-container
--md-filled-tonal-icon-button-container-shape--md-sys-shape-corner-full
--md-filled-tonal-icon-button-container-width40px
--md-filled-tonal-icon-button-container-height40px
--md-filled-tonal-icon-button-icon-size24px

Filled Tonal Icon Button example

Link to “Filled Tonal Icon Button example”
check
<style>
:root {
  --md-filled-tonal-icon-button-container-width: 80px;
  --md-filled-tonal-icon-button-container-height: 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-icon>check</md-icon>
</md-filled-tonal-icon-button>
TokenDefault value
--md-outlined-icon-button-outline-color--md-sys-color-outline
--md-outlined-icon-button-outline-width1px
--md-outlined-icon-button-container-shape--md-sys-shape-corner-full
--md-outlined-icon-button-container-width40px
--md-outlined-icon-button-container-height40px
--md-outlined-icon-button-icon-size24px
check
<style>
:root {
  --md-outlined-icon-button-container-width: 80px;
  --md-outlined-icon-button-container-height: 80px;
  --md-outlined-icon-button-container-shape: 0px;
  --md-outlined-icon-button-icon-size: 40px;
  --md-outlined-icon-button-outline-width: 4px;
  --md-sys-color-outline: #006A6A;
}
</style>
<md-outlined-icon-button>
  <md-icon>check</md-icon>
</md-outlined-icon-button>
PropertyAttributeTypeDefaultDescription
disableddisabledbooleanfalseDisables the icon button and makes it non-interactive.
flipIconInRtlflip-icon-in-rtlbooleanfalseFlips the icon if it is in an RTL context at startup.
hrefhrefstring''Sets the underlying HTMLAnchorElement's href resource attribute.
targettargetstring''Sets the underlying HTMLAnchorElement's target attribute.
ariaLabelSelectedaria-label-selectedstring''The aria-label of the button when the button is toggleable and selected.
toggletogglebooleanfalseWhen true, the button will toggle between selected and unselected states
selectedselectedbooleanfalseSets the selected state. When false, displays the default icon. When true, displays the selected icon, or the default icon If no slot="selected" icon is provided.
typetypestring'submit'The default behavior of the button. May be "button", "reset", or "submit" (default).
valuevaluestring''The value added to a form with the button's name when the button submits a form.
namestringundefined
formHTMLFormElementundefined
labelsNodeListundefined
EventTypeBubblesComposedDescription
inputInputEventYesYesDispatched when a toggle button toggles
changeEventYesNoDispatched when a toggle button toggles

MdFilledIconButton <md-filled-icon-button>

Link to “MdFilledIconButton <md-filled-icon-button>”
PropertyAttributeTypeDefaultDescription
disableddisabledbooleanfalseDisables the icon button and makes it non-interactive.
softDisabledsoft-disabledbooleanfalse"Soft-disables" the icon button (disabled but still focusable).
flipIconInRtlflip-icon-in-rtlbooleanfalseFlips the icon if it is in an RTL context at startup.
hrefhrefstring''Sets the underlying HTMLAnchorElement's href resource attribute.
targettargetstring''Sets the underlying HTMLAnchorElement's target attribute.
ariaLabelSelectedaria-label-selectedstring''The aria-label of the button when the button is toggleable and selected.
toggletogglebooleanfalseWhen true, the button will toggle between selected and unselected states
selectedselectedbooleanfalseSets the selected state. When false, displays the default icon. When true, displays the selected icon, or the default icon If no slot="selected" icon is provided.
typetypestring'submit'The default behavior of the button. May be "button", "reset", or "submit" (default).
valuevaluestring''The value added to a form with the button's name when the button submits a form.
namestringundefined
formHTMLFormElementundefined
labelsNodeListundefined
EventTypeBubblesComposedDescription
inputInputEventYesYesDispatched when a toggle button toggles
changeEventYesNoDispatched when a toggle button toggles

MdFilledTonalIconButton <md-filled-tonal-icon-button>

Link to “MdFilledTonalIconButton <md-filled-tonal-icon-button>”
PropertyAttributeTypeDefaultDescription
disableddisabledbooleanfalseDisables the icon button and makes it non-interactive.
flipIconInRtlflip-icon-in-rtlbooleanfalseFlips the icon if it is in an RTL context at startup.
hrefhrefstring''Sets the underlying HTMLAnchorElement's href resource attribute.
targettargetstring''Sets the underlying HTMLAnchorElement's target attribute.
ariaLabelSelectedaria-label-selectedstring''The aria-label of the button when the button is toggleable and selected.
toggletogglebooleanfalseWhen true, the button will toggle between selected and unselected states
selectedselectedbooleanfalseSets the selected state. When false, displays the default icon. When true, displays the selected icon, or the default icon If no slot="selected" icon is provided.
typetypestring'submit'The default behavior of the button. May be "button", "reset", or "submit" (default).
valuevaluestring''The value added to a form with the button's name when the button submits a form.
namestringundefined
formHTMLFormElementundefined
labelsNodeListundefined
EventTypeBubblesComposedDescription
inputInputEventYesYesDispatched when a toggle button toggles
changeEventYesNoDispatched when a toggle button toggles

MdOutlinedIconButton <md-outlined-icon-button>

Link to “MdOutlinedIconButton <md-outlined-icon-button>”
PropertyAttributeTypeDefaultDescription
disableddisabledbooleanfalseDisables the icon button and makes it non-interactive.
flipIconInRtlflip-icon-in-rtlbooleanfalseFlips the icon if it is in an RTL context at startup.
hrefhrefstring''Sets the underlying HTMLAnchorElement's href resource attribute.
targettargetstring''Sets the underlying HTMLAnchorElement's target attribute.
ariaLabelSelectedaria-label-selectedstring''The aria-label of the button when the button is toggleable and selected.
toggletogglebooleanfalseWhen true, the button will toggle between selected and unselected states
selectedselectedbooleanfalseSets the selected state. When false, displays the default icon. When true, displays the selected icon, or the default icon If no slot="selected" icon is provided.
typetypestring'submit'The default behavior of the button. May be "button", "reset", or "submit" (default).
valuevaluestring''The value added to a form with the button's name when the button submits a form.
namestringundefined
formHTMLFormElementundefined
labelsNodeListundefined
EventTypeBubblesComposedDescription
inputInputEventYesYesDispatched when a toggle button toggles
changeEventYesNoDispatched when a toggle button toggles
About
IntroductionQuick StartRoadmapSupportBundle Sizes
Theming
Material ThemingColorTypographyShape
Components
ButtonsCheckboxChipsDialogsFloating action button (FAB)Icon ButtonsListsMenus