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>

Get React Material-UI Cookbook now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.