How to add icons inside Select
options? I tried many times but none of them are working:
<option value={0}>Item One</option>
<option value={1}>
<i class="fas fa-expand" />
Item two
</option>
Full sample code:
class IconInSelect extends Component {
state = {
value: 0
};
handleChange = name => event => {
this.setState({ [name]: event.target.value });
};
render() {
const { value } = this.state;
const { classes } = this.props;
return (
<Select
autoWidth
native
value={value}
onChange={this.handleChange("value")}
name="value"
variant="filled"
classes={{
root: classes.selectEmpty,
select: classes.select
}}
>
<option value={0}>Item One</option>
<option value={1}>
<i class="fas fa-expand" />
Item two
</option>
<option value={2}>Item three</option>
</Select>
);
}
}
Codesandbox
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.
Create an icon buttonImport the IconButton component from the Material-UI core package. import IconButton from '@material-ui/core/IconButton'; Render the icon as a child component to the IconButton . You can also move the color prop to the IconButton .
To change the color of Select component's border and arrow icon with React Material UI, we can use the '&:before' and '&:after' selectors and apply the styles for them. We call makeStyles with a function that returns an object with the select property set to an object with the drop down styles.
Use MenuItem.
class IconInSelect extends Component {
...
render() {
return (
<Select>
<MenuItem value="">
<ListItemIcon>
<InboxIcon />
</ListItemIcon>
<ListItemText primary="Inbox" />
</MenuItem>
<MenuItem value={10}>Ten</MenuItem>
<MenuItem value={20}>Twenty</MenuItem>
<MenuItem value={30}>Thirty</MenuItem>
</Select>
);
}
}
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