Icon Button

actions

Icon buttons help people take supplementary actions with a single tap. They display an icon without a text label.

Variants

Standard

Default

Icon button without background, lowest emphasis

Filled

Icon button with solid background, highest emphasis

Filled Tonal

Icon button with tonal background, medium emphasis

Outlined

Icon button with outline border, medium emphasis

Properties

Name Type Required Default Description
variant enum - standard Visual style of the icon button
disabled boolean - - Whether the button is disabled
softDisabled boolean - - Disabled but still focusable for accessibility
toggle boolean - - Whether the button toggles between selected states
selected boolean - - Whether the toggle button is selected
href string - - URL to navigate to, making the button a link
target string - - Link target attribute
flipIconInRtl boolean - - Flips the icon in RTL layouts
ariaLabelSelected string - - Aria label when toggle button is selected

States

enabled

Default interactive state

disabled

Non-interactive state

soft-disabled

Disabled but still focusable

hovered

Mouse hover state

focused

Keyboard focus state

pressed

Active/pressed state

selected

Toggle selected state

Accessibility

Role: button
Keyboard Support:
  • Enter - Activate the button
  • Space - Activate the button
  • Tab - Move focus to/from the button
Screen Reader Notes: Always requires aria-label since there is no visible text. For toggle buttons, provide aria-label-selected for selected state.

LLM Context

Intent: Provide compact supplementary actions
Anti-Patterns:
  • Icon button without aria-label
  • Using icon button for primary actions
  • Icon that is not universally recognizable without label
  • Too many icon buttons without grouping
Example Usage: 
<md-icon-button aria-label="Search"><md-icon>search</md-icon></md-icon-button>
<md-filled-icon-button aria-label="Add"><md-icon>add</md-icon></md-filled-icon-button>
<md-icon-button toggle aria-label="Favorite"><md-icon>favorite_border</md-icon><md-icon slot="selected">favorite</md-icon></md-icon-button>