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

Mina Djuric · Answer 1 · 2018-07-20T07:03:30.310

39

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 }

edited Jul 20 '18 at 07:03

answered Jul 19 '18 at 07:37

Mina Djuric

520
5
7

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. – Vincente Jul 16 '20 at 12:03
1

I added the `{ pointer-events: none }` in css but the icon is still not clickable. Any idea what I could do? – Inaara Kalani Nov 16 '22 at 07:59
Hi @InaaraKalani, please see the answer bellow depending on the version you are using. – Mina Djuric Nov 18 '22 at 07:12

score 32 · Answer 2 · answered Apr 26 '19 at 11:52

32

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.

answered Apr 26 '19 at 11:52

Yevgeni Makarovich

329
3
2

Thank you for this! Where would you find documentation that would discuss this? – Chris Stahl Jun 03 '20 at 08:11
@ChrisStahl For each component you can find it's documation of component inside api. For example https://material-ui.com/api/select/ – Bikal Basnet Jun 15 '20 at 05:01
@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. – Chris Stahl Jun 16 '20 at 12:58
1

also this answer might be usefull here https://stackoverflow.com/questions/54929613/select-is-not-working-onclick-iconcomponentdropdown-arrow-in-react-material-ui – Ignat Galkin Jan 29 '21 at 18:27
If you use typescript, this will throw a TS error: `Type 'ReactElement' is not assignable to type '"view"'` – Zac Oct 26 '21 at 16:59
How will this work for other icon frameworks like Google Icons or FontAwesome? – Inaara Kalani Nov 16 '22 at 07:58
is there a global way of doing this? , so that I can avoid adding this to every select component in my application. – Manoj TM Jun 14 '23 at 03:11

score 18 · Answer 3 · edited Jun 10 '21 at 17:56

18

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

edited Jun 10 '21 at 17:56

Nathan Arthur

8,287
7
55
80

answered May 07 '21 at 22:15

Vivek Kapoor

431
6
7

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 – Sartheris Stormhammer Aug 01 '22 at 12:26

score 2 · Answer 4 · answered Apr 26 '18 at 11:20

2

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

answered Apr 26 '18 at 11:20

Shantiswarup Tunga

591
2
12

1

Kindly include the documentation for SelectField. It cannot be imported automatically. – iamjpcbau Dec 14 '20 at 02:55

score 2 · Answer 5 · answered Aug 10 '18 at 13:13

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,
        }}
      />

score 0 · Answer 6 · answered Jun 14 '23 at 07:40

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/>}
  />

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

6 Answers6