How it works...

The Avatar component is used on icons with a circular shape. The color of the circle comes from the theme palette – the shade of grey used depends on whether the theme is light or dark. The icon itself is passed as the child element:

<ListItemIcon>
  <Avatar>
    <Icon />
  </Avatar>
</ListItemIcon>