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

Issue

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.

enter image description here

enter image description here

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>

Solution

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 here:

<Select
  displayEmpty
  renderValue={(value) => {
    return (
      <Box sx={{ display: "flex", gap: 1 }}>
        <SvgIcon color="primary">
          <LocationOnIcon />
        </SvgIcon>
        {value}
      </Box>
    );
  }}
  {...}
>

Live Demo

Codesandbox Demo

Answered By – NearHuscarl

Answer Checked By – Candace Johnson (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.