Menu
I am using material-ui select field. I want to change the given drop down icon to a different font icon. How to achieve this? I don't see any option to over-ride this style
578
To change the dropdown icon in React Material UI select field, we can set the IconComponent prop to a function that returns the icon component we want to render. We set the Select 's IconComponent prop to a function that returns the Person icon component. And we add some MenuItem components to add some choices.
The simplest way to specify/override the color of an Icon in Material-UI is to use a custom CSS class name. Suppose that you want to show a green checkbox rather than a red triangle, depending on the outcome of some process. You then apply makeStyles to that function, and run the result.
In latest Material-ui v1.4.0. there is a property IconComponent which can receive function:
import Select from '@material-ui/core/Select';
import Person from '@material-ui/icons/Person';
<Select
IconComponent={() => (
<Person />
)}>
Also, in case the icon is not clickable, you need to add in css
{ pointer-events: none }
96
Nowadays, the best way as for me, it's just
import Select from '@material-ui/core/Select';
import Person from '@material-ui/icons/Person';
<Select
IconComponent = {Person}
/>
Works perfectly without any css additions.
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
