I've been trying to incorporate my own icon for the material UI select component. I successfully replaced the default icon using the "IconComponent" attribute in MU select.
However, I'm facing issues with the new icon not rotating when the menu list is opened, unlike the default icon. Additionally, clicking on the new icon doesn't open the menu with values. The list items only appear when I click on the select component itself, not the new icon.
I've experimented with two different icons (anotherIcon and newIcon), but the problem persists.
const newIcon = (
<svg
width="38"
height="38"
viewBox="0 0 38 38"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
// New icon SVG code goes here
</svg>
);
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">Age</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={age}
label="Age"
onChange={handleChange}
IconComponent={() => <div className="test">{newIcon}</div>}
>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
</FormControl>
I also attempted to manually override the select iconOpen class to rotate the icon by 180deg (similar to this example React JS Material UI Select IconComponent (Dropdown Icon) avoid rotating), but it didn't work either.
If anyone knows why the new icons aren't rotating and how to resolve this issue, as well as enable the menu to open upon clicking the new icon directly, I would appreciate your insights.
Here's a demo: https://codesandbox.io/s/basicselect-material-demo-forked-d946k1?file=/demo.js