CODEWITHSUNDEEP
reactjsautocompletematerial-ui
franciscojs
franciscojs

Reputation: 61

How to override Material-UI Chip deleteIcon / cancelIcon?

I've created a custom theme and I've successfully created a bunch of overrides for various components.

I'm using an Autocomplete component with "multiple" enabled so each option I add gets added inside as a Chip that has an icon to remove it which I'm trying to change. I wish to do this override on a higher level as I think that's the only solution for me as I'm not actually importing the Chip component but it's created by the Autocomplete component I'm using.

Screenshot of Chips inside the Autocomplete component

Upvotes: 0

Views: 2002

Answers (1)

MaxAlex
MaxAlex

Reputation: 3319

The Autocomplete component has ChipProps property: "Props applied to the Chip element"

import DoneIcon from '@material-ui/icons/Done';

<Autocomplete
  multiple
  ChipProps={{ deleteIcon: <DoneIcon /> }}
  ...
/>

Upvotes: 3

Related Questions