Adjusting the gap between svg icon and text on Material-UI's List component

Question

I've been trying to figure out how to lessen the gap using css with no luck. I created the style object and used leftPosition key but the result was not the one I expected. I was expecting that the text is the only thing that will move. However, if you look at the screenshot specifically the first menu, the icon also moved. What I'd like to achieve is reduce the gap between the svn icon and the text.

import React from 'react';
import List from 'material-ui/lib/lists/list';
import ListItem from 'material-ui/lib/lists/list-item';
import ActionGrade from 'material-ui/lib/svg-icons/action/grade';
import ActionInfo from 'material-ui/lib/svg-icons/action/info';
import ContentInbox from 'material-ui/lib/svg-icons/content/inbox';
import ContentDrafts from 'material-ui/lib/svg-icons/content/drafts';
import ContentSend from 'material-ui/lib/svg-icons/content/send';
import Divider from 'material-ui/lib/divider';

import Assignment from 'material-ui/lib/svg-icons/action/assignment';
import Settings from 'material-ui/lib/svg-icons/action/settings';
import ManageDB from 'material-ui/lib/svg-icons/content/unarchive';

const style = {
  menu: {
    marginRight: 32,
    marginBottom: 32,
    float: 'left',
    position: 'relative',
    zIndex: 0,
    width: 235,
  },
  rightIcon: {
    textAlign: 'center',
    lineHeight: '24px',
  },
  width: {
    width: 235
  },
  leftPosition: {
    left: 50
  }
};

const LeftNavigation = () => (
  <div>
    <List>
      <ListItem style={style.leftPosition} primaryText="Logs" leftIcon={<Assignment />} />
      <ListItem primaryText="Manage DB" leftIcon={<ManageDB style={style.gap}/>} />
      <ListItem primaryText="Top Issues" leftIcon={<ContentSend style={style.gap}/>} />
      <ListItem primaryText="Settings" leftIcon={<Settings style={style.gap}/>} />
      <ListItem primaryText="Logout" leftIcon={<ContentInbox style={style.gap}/>} />
    </List>
    <Divider />
    <List>
      <ListItem primaryText="All mail" rightIcon={<ActionInfo />} />
      <ListItem primaryText="Trash" rightIcon={<ActionInfo />} />
      <ListItem primaryText="Spam" rightIcon={<ActionInfo />} />
      <ListItem primaryText="Follow up" rightIcon={<ActionInfo />} />
    </List>
  </div>
);

export default LeftNavigation;

Answer 1

The accepted solution didn't work for me. Here is what I ended up doing after exploring the DOM.

const useStyles = makeStyles((theme) => ({
    icon: {
        minWidth: '30px',
    }
}));

and then apply this class for the ListItemIcon as:

<ListItemIcon className={classes.icon}> <HelpOutlineIcon/> </ListItemIcon>

Hope it helps someone save time.

Answer 2

You can add style in ListItemIcon.

<ListItemIcon style={{minWidth: '40px'}} >

Answer 3

This is what worked for me. I set this in my global css file.

.MuiListItemIcon-root {
  min-width: 40px !important;
}