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
Best Answer
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';<SelectIconComponent={() => (<Person />)}>Also, in case the icon is not clickable, you need to add in css { pointer-events: none }
Nowadays, the best way as for me, it's just
import Select from '@material-ui/core/Select';import Person from '@material-ui/icons/Person';<SelectIconComponent = {Person}/>Works perfectly without any css additions.
IconComponent={(props) => (<ExpandMoreOutlinedIcon {...props}/>)}const HomeIcon = (props) => (<SvgIcon {...props}><path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" /></SvgIcon>);<SelectField dropDownMenuProps={{iconButton:<HomeIcon />,}}/>You can override the dropDownMenuProps to render a different icon
if you are passing it to another comp. like TablePagination do like this
// @flowimport React from 'react';import ChevronDownIcon from 'mdi-react/ChevronDownIcon';<TablePaginationcolSpan={3}component="div"count={itemsTotal}rowsPerPage={pageSize}page={currentPage}rowsPerPageOptions={rowPerPageOptions}onChangePage={handleChangePage}onChangeRowsPerPage={handleChangeRowsPerPage}ActionsComponent={PaginationActionsWrapped}SelectProps={{IconComponent: () => <ChevronDownIcon />,}}classes={{root: classes.root,select: classes.select,selectIcon: classes.selectIcon,caption: classes.caption,}}/>We can change Icon like this:
Declare a component:
const AtomDropDown = React.forwardRef<HTMLButtonElement, any>(({ Icon }, ref): JSX.Element => {return (<NativeSelectIconComponent={() => {return Icon ? Icon : <KeyboardArrowDownIcon />}}>{options.map((option: any) => {return <option value={option.key}>{option.name}</option>})}</NativeSelect></div >)});export default AtomDropDown;How to use:
import {AtomDropDown} from '@/components/atom/dropdown/index';<AtomDropDownIcon={<KeyboardArrowDownIcon/>}/>