Is there a way to change the close icons on the autocomplete component of material ui?

user_13440981 0
Viewed 655

I would like to change the icon, but would like to keep the function when clicking. is there a good solution for this?

I want to change this Icon

<Autocomplete
      multiple
      id="checkboxes-tags-demo"
      options={top100Films}
      disableCloseOnSelect
      getOptionLabel={(option) => option.title}
      renderOption={(option, { selected }) => (
        <React.Fragment>
          <Checkbox
            icon={icon}
            checkedIcon={checkedIcon}
            style={{ marginRight: 8 }}
            checked={selected}
          />
          {option.title}
        </React.Fragment>
      )}
      style={{ width: 500 }}
      renderInput={(params) => (
        <TextField {...params} variant="outlined" label="Checkboxes" placeholder="Favorites" />
      )}
    />

Can anybody help me?

material-ui reactjs autocomplete javascript
2 Answers

You can pass a function to customize the rendering of the Chip component used by the Autocomplete

<Autocomplete
    multiple
    id="tags-filled"
    options={top100Films.map((option) => option.title)}
    defaultValue={[top100Films[13].title]}
    freeSolo
    renderTags={(value, getTagProps) =>
      value.map((option, index) => (
        <Chip variant="outlined" label={option} {...getTagProps({ index })} />
      ))
    }
    renderInput={(params) => (
      <TextField {...params} variant="filled" label="freeSolo" placeholder="Favorites" />
    )}
  />

And the Chip component can be further customized with the deleteIcon prop

Edit: For more info, see the API of the Autocomplete and the API of the Chip

user_121602880

You can change it using the ChipProps of Autocomplete, as that icon is a part of a Chip component, and can be customized through deleteIcon property

user_151834640
Related