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