Skip to content

Commit

Permalink
fix(material-ui): specify img width inside ListItemIcon
Browse files Browse the repository at this point in the history
The `width` and `height` css rule aren't there anymore after upgrading to material-ui@1.0.0-beta.45 (or is it some king of side effect of @material-ui/icons@1.0.0-beta.43 upgrade ?).

```diff
.MuiListItemIcon-root-162 {
    color: rgba(0, 0, 0, 0.54);
    flex-shrink: 0;
    margin-right: 16px;
-    width: 24px;
-    height: 24px;
```

```diff
<a tabindex="0" class="MuiButtonBase-root-52 MuiListItem-root-142 MuiListItem-default-145 MuiListItem-gutters-149 MuiListItem-button-150" role="button" href="https://twitter.com/topheman" title="@topheman on twitter">
  <img src="..." alt="twitter" class="MuiListItemIcon-root-162">
  ...
</a>
```
  • Loading branch information
topheman committed May 7, 2018
1 parent 8ada70a commit 18a6189
Showing 1 changed file with 10 additions and 3 deletions.
13 changes: 10 additions & 3 deletions src/components/MainDrawer.js
Expand Up @@ -6,6 +6,7 @@ import Divider from "material-ui/Divider";
import CloseIcon from "@material-ui/icons/Close";
import HomeIcon from "@material-ui/icons/Home";
import MuiDrawer from "material-ui/Drawer";
import classNames from "classnames";

import twitterIcon from "../assets/images/twitter-retina.png";
import githubIcon from "../assets/images/github-retina.png";
Expand All @@ -26,6 +27,10 @@ const styles = {
},
horizontalList: {
width: "auto"
},
listIcon: {
width: 24,
height: 24
}
};

Expand Down Expand Up @@ -53,7 +58,7 @@ const MainDrawer = ({ classes, anchor, open, onClose, ...remainingProps }) => {
title="npm-registry-browser on github"
>
<ListItemIcon>
<img src={githubIcon} alt="github" />
<img src={githubIcon} className={classes.listIcon} alt="github" />
</ListItemIcon>
<ListItemText primary="Github" />
</ListItem>
Expand All @@ -64,7 +69,7 @@ const MainDrawer = ({ classes, anchor, open, onClose, ...remainingProps }) => {
title="@topheman on twitter"
>
<ListItemIcon>
<img src={twitterIcon} alt="twitter" />
<img src={twitterIcon} className={classes.listIcon} alt="twitter" />
</ListItemIcon>
<ListItemText primary="Twitter" />
</ListItem>
Expand All @@ -76,7 +81,9 @@ const MainDrawer = ({ classes, anchor, open, onClose, ...remainingProps }) => {
title="@topheman on twitter"
>
<ListItemIcon>
<HomeIcon className={classes.svgColor} />
<HomeIcon
className={classNames(classes.svgColor, classes.listIcon)}
/>
</ListItemIcon>
<ListItemText primary="labs.topheman.com" />
</ListItem>
Expand Down

0 comments on commit 18a6189

Please sign in to comment.