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>
);
}
}
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