How can I add an icon to Material UI Select options?

Use MenuItem.

class IconInSelect extends Component {
  ...
  render() {
    return (
      <Select>
        <MenuItem value="">
          <ListItemIcon>
            <InboxIcon />
          </ListItemIcon>
          <ListItemText primary="Inbox" />
        </MenuItem>
        <MenuItem value={10}>Ten</MenuItem>
        <MenuItem value={20}>Twenty</MenuItem>
        <MenuItem value={30}>Thirty</MenuItem>
      </Select>
    );
  }
}

enter image description here


This works better without line-break when selected

<MenuItem value={10}>
    <div style={{ display: 'flex', alignItems: 'center' }}>
        <InboxIcon />
        <div>Inbox</div>
    </div>
</MenuItem>

Just use custom styling in InboxIcon and set margin according to your need