How do I change the dropdown icon in material-ui select field?

Question

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

Durtschi

Answer 1

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 }

Folkmoot

It's outdated answer. In material-ui 4.9.9, it has to be done in a way which specified by Yevgeni Makarovich. Then icon gets proper css classes and is clickable. – Epilogue

I added the { pointer-events: none } in css but the icon is still not clickable. Any idea what I could do? – Quail

Hi @InaaraKalani, please see the answer bellow depending on the version you are using. – Folkmoot

Answer 2

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.

Drawbridge

Thank you for this! Where would you find documentation that would discuss this? – Tertullian

@ChrisStahl For each component you can find it's documation of component inside api. For example material-ui.com/api/select – Lawhorn

@BikalBasnet Thank you. I was aware of the API documentation. I should have been more specific. For folks who are new to the MUI ecosystem like myself, there aren't any examples within the MUI Select or the API documentation on how exactly to use this prop. – Tertullian

also this answer might be usefull here #54930113 – Deserve

If you use typescript, this will throw a TS error: Type 'ReactElement<any, any>' is not assignable to type '"view"' – Stearne

How will this work for other icon frameworks like Google Icons or FontAwesome? – Quail

is there a global way of doing this? , so that I can avoid adding this to every select component in my application. – Kafka

But also if you would like to pass some props to your icon you will need to use function that returns icon and then don't forget to provide props so that your icon remains functional(rotates by clicking on select) and well styled(position etc.) For example: IconComponent={(props) => <ArrowDownIcon {...props} style={{position: 'absolute', top: '8px'}} />} – Accomplished

Answer 3

IconComponent={(props) => (<ExpandMoreOutlinedIcon {...props}/>)}

Firstnighter

THIS should be the correct answer! By passing props you allow the icon to work as intended, and have click and cursor passed on it – Archiearchiepiscopacy

Answer 4

You may also want to change it globally, you can do it using the theme

https://mui.com/material-ui/customization/theme-components/

First you setup your theme:

//theme.js

import { createTheme } from '@mui/material/styles';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';

const theme = createTheme({
    components: {
        // Name of the component
        MuiSelect: {
            defaultProps: {
                IconComponent: ExpandMoreIcon,
                //there are tons of props that you can override
            },
            styleOverrides: {
                root: {
                    '.MuiSvgIcon-root': {
                        // color: 'your color',
                    }
                },
            },
        },
    },
});

export { theme };

Then you wrap the select or other components in the ThemeProvider:

import { ThemeProvider } from '@mui/material/styles';
import { theme } from 'path/to/your/theme.js';

const MyComponent = () => {
    return (
        <ThemeProvider theme={theme}>
            <Select
                labelId="demo-simple-select-label"
                id="demo-simple-select"
                value={age}
                label="Age"
                onChange={handleChange}
            >
                <MenuItem value={10}>Ten</MenuItem>
                <MenuItem value={20}>Twenty</MenuItem>
                <MenuItem value={30}>Thirty</MenuItem>
            </Select>
        </ThemeProvider>
    )
}

export { MyComponent };

Papillote

Answer 5

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

Asleep

Kindly include the documentation for SelectField. It cannot be imported automatically. – Parmesan

Answer 6

if you are passing it to another comp. like TablePagination do like this

    // @flow
    import React from 'react';
    import ChevronDownIcon from 'mdi-react/ChevronDownIcon';
      <TablePagination
        colSpan={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,
        }}
      />

Mcleroy

Answer 7

We can change Icon like this:

Declare a component:

const AtomDropDown = React.forwardRef<HTMLButtonElement, any>(
    ({ Icon }, ref): JSX.Element => {
        return (
            <NativeSelect
                IconComponent={() => {
                    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';
  <AtomDropDown
    Icon={<KeyboardArrowDownIcon/>}
  />

Navar