Material-ui: [Drawer] mini variant icon alignment bug

[greg-schrammel]

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

Drawner ListItem icons should be aligned center.

Current Behavior 😯

ListItemIcon get weard left margin

Steps to Reproduce 🕹

you can reproduce in the docs drawner mini variant https://material-ui.com/demos/drawers/

Link:

1. https://codesandbox.io/s/k38j686l1v

Your Environment 🌎

| Tech | Version |
|--------------|---------|
| Material-UI | v3.7.0 and v3.7.1 |
| React | v16.7.0 |

[joshwooding]

This is due to the width including the scrollbar so it doesn't cover the icon but when the scrollbar is hidden the width is wrong.

[sehcheese]

Any timeframe on a fix for this? Thanks for your work!

[ldenblyd]

still no fix for this ?

[Lani]

Just to add some more information, and hopefully, find a solution:

For me, this is working in v3.9.3. But when upgrading to v4.3.2 I also get this problem. It is also visible in the official code sandbox example for the latest version: https://codesandbox.io/s/ti7w3

When I compare the active css classes in the dev tools in chrome I can see that v3.9.3 have this media query:

@media (min-width: 600px)
.MuiListItem-gutters {
    padding-left: 24px;
    padding-right: 24px;
}

But it's missing in v4.3.2.

I've tracked the problem to this change/commit: https://github.com/mui-org/material-ui/commit/8028253329af44bdf9eabfdff0727abcd40ccaf3#diff-10051efc76b52eae0f0883192986491d

As a workaround, I re-added the theme.mixins.gutters() call for my ListItem component:

const styles = theme => ({
  gutters: theme.mixins.gutters(),
});

<ListItem classes={{ gutters: classNames(classes.gutters) }}>
</ListItem>

I don't know how to classify this, but I think that the mini drawer example is not complete now, as it center aligns the icons on small screens but not on large screens. Ideally, the scrollbars visibility should be taken into account as well.

I hope this helps :)