IconButton

Icon buttons are commonly found in app bars and toolbars. Icons are also appropriate for toggle buttons that allow a single choice to be selected or deselected, such as adding or removing a star to an item.

<div style={{ display: 'flex', justifyContent: 'space-between' }}>
  <IconButton
    aria-label="menu button"
    onClick={() => console.log('clicked icon')}
    onKeyDown={(event)=> console.log('key pressed')}
  >
    <MenuHamburger />
  </IconButton>
  <IconButton disabled>
    <MenuHamburger />
  </IconButton>
  <IconButton
    color="black"
    onClick={() => console.log('clicked icon')}
    onKeyDown={(event)=> console.log('key pressed')}
    size="small"
  >
    <MenuDots />
  </IconButton>
  <IconButton
    color="black"
    onClick={() => console.log('clicked icon')}
    onKeyDown={(event)=> console.log('key pressed')}
    size="small"
    disabled
  >
    <MenuDots />
  </IconButton>
  <IconButton color="white">
    <Trophy />
  </IconButton>
  <IconButton color="white" disabled>
    <Trophy />
  </IconButton>
  <IconButton color="info">
    <Close />
  </IconButton>
  <IconButton color="error">
    <Close />
  </IconButton>
  <IconButton color="success">
    <Close />
  </IconButton>
  <IconButton color="warning">
    <Close />
  </IconButton>
</div>

Props

Prop	Type	Default	Description
children	node		The icon element.
classes	object		Override or extend the styles applied to the component. See CSS API below for more details.
color	'default' \| 'inherit' \| 'secondary' \| 'error' \| 'info' \| 'success' \| 'warning' \| 'black' \| 'white'	'default'	The color of the component. It supports those theme colors that make sense for this component.
data-testid	string		data-testid added to the root element of the component
disabled	bool	false	If true, the button will be disabled.
disableFocusRipple	bool	false	If true, the keyboard focus ripple will be disabled.
disableRipple	bool		If true, the ripple effect will be disabled.
edge	'start' \| 'end' \| false	false	If given, uses a negative margin to counteract the padding on one side (this is often helpful for aligning the left or right side of the icon with content above or below, without ruining the border size and shape).
size	'small' \| 'medium'	'medium'	The size of the button. small is equivalent to the dense button styling.
sx	Array<func \| object \| bool> \| func \| object		The system prop that allows defining system overrides as well as additional CSS styles.
onKeyDown	(event: object) => void		Callback fired when a key is pressed while the button is focused.

Examples

see Button