Chip Customization
The Chip provides options for customizing its avatar and its select and remove icons.
The component enables you to:
Displaying Avatars
To provide visual recognition and improve the end user interactions with your app, you can show an avatar in your Chip components. To achieve this, use the avatar property, which accepts a ChipAvatarProps object.
To show an image avatar, specify the image source and its alternative text through imageUrl and imageAlt. You can further adjust the avatar with rounded and style.
The following demo displays image avatars in Chips.
Customizing the Select Icon
To customize the icon that appears when the Chip is selected, set the selectedSvgIcon prop to an SVGIcon definition, or set selectedIcon to the name of a font icon.
The following example demonstrates custom select icons that appear when you click on a Chip.
Customizing the Remove Icon
A removable Chip displays a remove icon that you can replace with your own. The icon appears only when you set removable to true. Set removeSvgIcon to an SVGIcon definition, or set removeIcon to the name of a font icon.
The following example demonstrates removable Chips with custom remove icons.