Icon buttons
<IconButton
color="primary"
icon="edit"
shape="round"
size="small"
variant="filled"
width="default"
/>Shape
Toggleable
Disabled
Icon button
<IconButton icon="add" />Icon button variants
<IconButton icon="elevation" variant="elevated" />
<IconButton icon="colors" variant="filled" />
<IconButton icon="invert_colors" variant="tonal" />
<IconButton icon="select" variant="outlined" />
<IconButton icon="title" variant="text" />Icon button sizes
<IconButton icon="pen_size_1" size="extra-small" />
<IconButton icon="pen_size_2" size="small" />
<IconButton icon="pen_size_3" size="medium" />
<IconButton icon="pen_size_4" size="large" />
<IconButton icon="pen_size_5" size="extra-large" />Icon button widths
<IconButton icon="crop_portrait" width="narrow" />
<IconButton icon="crop_square" width="default" />
<IconButton icon="crop_landscape" width="wide" />Icon button colors
While technically not part of the spec, you can change the button color to
indicate different button roles to the user.
The default color is primary for every variant except tonal, where it is secondary.
<IconButton icon="timer_1" color="primary" />
<IconButton icon="timer_2" color="secondary" />
<IconButton icon="timer_3" color="tertiary" />
<IconButton icon="error" color="error" />
<IconButton icon="block" color="none" />Icon button shapes
<IconButton icon="circle" shape="round" />
<IconButton icon="square" shape="square" />Toggle icon buttons
<ToggleIconButton icon="add" />
<ToggleIconButton icon="title" variant="text" />
<ToggleIconButton icon="pen_size_3" size="medium" />
<ToggleIconButton icon="timer_3" color="tertiary" />
<ToggleIconButton icon="square" shape="square" />