[question] How do I use the chip component with an icon?

[rishabhdoshi-ux]

The problem in depth

MUI documentation includes an icon chip. How do recreate this in Figma? The only options I see right now are to replace the avatar component in the chip with an icon but this adds a fill color on the filled state. I'm looking to add icons without the circle that the avatar comes with.

Your environment

No response

Search keywords: chip, icon chip

[adrianmanea]

Simply select the background of the icon and remove it. This happens because the <Avatar> which is by default has a background applied and changing to an <Icon> it keeps some styles from the default instance.

If you have this use case quite often and you have to do this every time, add a new variant with the as the default slot instance.