[Autocomplete] Ability to change the IconButton SVG Icon

[AbdullahElrubi]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

I'd like to change the IconButton SVG Icon instead of the original <ArrowDropDownIcon /> with having all of its handlers and classes being able to change.

Examples 🌈

This is how it would be. This is my SVG Icon <KeyboardArrowDownIcon/>

This is the original one used.

Motivation 🔦

An app that I'm working on requires an autocomplete field but it's required from me to change the Icon to fit all the app Icons

[oliviertassinari]

@AbdallahElroby Have you thought of the API you would like to use for this customization? Maybe a PopupIconButtonComponent prop?

[mbrookes]

PopupIconComponent ?

[AbdullahElrubi]

@oliviertassinari I think it might be like you suggested but the catch is that we've two IconButtons actually, one for the CloseIcon and one for the <ArrowDropDownIcon /> and right now I can replace them using this:

                             InputProps={{
                                ...params.InputProps,
                                endAdornment: (
                                    <React.Fragment>
                                        {(this.state.loading && x.id === this.state.id) ? <CircularProgress color="inherit" size={20} /> : null}
                                        {openIcon}
                                    </React.Fragment>
                                ),
                            }}

Now let's say the proper API for these two Icons will be:

1. CloseIcon: CloseIconComponent .
2. ArrowDropDownIcon : PopupIconComponent as suggested by @mbrookes

[oliviertassinari]

@AbdallahElroby This sounds good to me

[AbdullahElrubi]

@oliviertassinari So when will we see a pull request by these APIs

[joshwooding]

@AbdallahElroby This issue is marked "good first issue". This means core team members tend to not work on them and leave them for the community, therefore giving a deadline is quite a difficult task as it relies on a member of the community or a new contributor picking up the issue. If you would like to see it added quicker I would recommend reading CONTRIBUTING.md and giving it a go yourself, we are happy to help you if you get stuck :)

[AbdullahElrubi]

@oliviertassinari I've made a PR with this issue
I'm kinda urgently need it to the project I'm working on

[Amirhossein-Moghadam]

Hi , if you use Autocomplete , it's better to use "popupIcon" , because Textfield is different from AutoComplete and when you use inputProps , autocomplete doesn't show options.

<Autocomplete popupIcon={ <<ArrowDropDownIcon />/> } />

[eSpark-Abideena]

<Autocomplete
popupIcon={<KeyboardArrowDownIcon sx={{ color: '#777777' }}
/>