如何将图标添加到 Material-UI Select？

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

我需要添加一个位置图标来响应 Material-UI Select 选项。但是没有选项...我在 select 中阅读了 API 文档，但找不到相关选项。所以我真的需要你的帮助。非常感谢。

我找到了这样的代码。但无法正常工作。

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

您可以覆盖 renderValue 回调以使用您想要的任何图标呈现所选文本。如果未选择任何选项，请记住设置 displayEmpty 以强制 Select 显示空值。作为参考，请参阅 API here:

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

现场演示