• I have searched the issues of this repository and believe that this is not a duplicate.

Motivation

Currently, if I display a list of icon items below a list of list avatar items, it gives this:

This looks broken to me. The icons are not aligned with the avatars. I would prefer this:

Summary

The idea is to create a CenteredListItemIcon component:

const CenteredListItemIcon = ({ children = undefined, ...props }) => (
  <ListItemIcon {...props}>
    <div
      style={{
        width: '40px',
        display: 'flex',
        justifyContent: 'center'
      }}
    >
      {children}
    </div>
  </ListItemIcon>
);

Or just add an align attribute to the ListItemIcon component.