How it works...

The ListItemIcon component can be used as a child of ListItem components. In the previous example, it comes before the text, so it ends up to the left of the item text:

<ListItem button key={index}>
  <ListItemIcon>
    <AccountCircleIcon />
  </ListItemIcon>
  <ListItemText primary={item.name} />
</ListItem>

You could place the icon after the text as well:

<ListItem button key={index}>
  <ListItemText primary={item.name} />
  <ListItemIcon>
    <AccountCircleIcon />
  </ListItemIcon>
</ListItem>

Here's how it looks: