CODEWITHSUNDEEP
reactjsautocompletematerial-uiicons
murat dereköylü
murat dereköylü

Reputation: 125

Material-UI - How to customize dropdown icon in Autocomplete?

How can I just change the icon for the open/close dropdown list? I want to functionality to stay the same. As I tried to add them as endAdornment, the functionality is gone for both remove and open/close(arrow) icons.

I just want to add a new arrow icon instead of Material-UI's custom one.

enter image description here

return (
    <div>
        <Autocomplete
            {...defaultProps}
            className="contract-search"
            onChange={(event, value) => {
                handleOnChange(event, value);
            }}
            id="disable-close-on-select"
            sx={{ width: 300 }}
            renderInput={params => {
                console.log(params);
                return (
                    <TextField
                        {...params}
                        InputProps={{
                            ...params.InputProps,
                            startAdornment: (
                                <span className="contract-search-icon">
                                    <img src={`${ASSETS_BASE_URL}/icons/icon-search.svg`} alt="" />
                                </span>
                            ),
                        }}
                        label="Vertrag suchen"
                        variant="standard"
                    />
                );
            }}
        />
    </div>
);

Upvotes: 9

Views: 9224

Answers (2)

Abrham Muche
Abrham Muche

Reputation: 1

"& .MuiAutocomplete-endAdornment": { display: "contents", width: "3rem", },

Upvotes: -1

NearHuscarl
NearHuscarl

Reputation: 81310

Use popupIcon prop, it accepts a ReactNode. See the full API of Autocomplete here:

<Autocomplete popupIcon={<YourCustomIcon />}

Live Demo

Codesandbox Demo

Upvotes: 15

Related Questions