How can I add an icon to Material-UI Select?-CodePudding

I need to add a location icon to react Material-UI Select options. But there is no option for that...I read API docs in select but can't find a related option. So I really need your help with that. Thank you very much.

I found code like this. but not working properly.

<div id='location-box'>
  <Select>
    <MenuItem value="">
      <ListItemIcon>
        <LocationOnIcon />
      </ListItemIcon>
      <ListItemText primary="Inbox" />
    </MenuItem>
    <MenuItem value={10}>Ten</MenuItem>
    <MenuItem value={20}>Twenty</MenuItem>
    <MenuItem value={30}>Thirty</MenuItem>
  </Select>
</div>

CodePudding user response：

You can override the renderValue callback to render the selected text with whatever icon you want. Remember to set displayEmpty to force the Select display an empty value if no option is selected. For reference, see the full list of API