Chip Customization
The Chip provides options for customizing its avatar and its remove icon.
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. You can choose between rendering an image from a specified location or displaying predefined initials. To render an avatar inside a Chip, use the built-in avatarSettings property.
The avatarSettings property accepts an object of type ChipAvatarSettings, which provides the following configuration options:
cssStyle—Sets the CSS styles applied to the wrapper element of the Chip avatar.imageAltText—Sets thealtattribute of the Chip avatar image.imageCssStyle—Sets the CSS styles applied to the Chip avatar image.imageSrc—Sets the Chip avatar image.initials—Sets the Chip avatar initials.initialsCssStyle—Sets the CSS styles applied to the wrapper element of the Chip avatar initials.
Starting with
v17.0.0, theavatarClassproperty is no longer available and is replaced with theavatarSettingsoption. For earlier versions, you can still use theavatarClassproperty to render avatar icons in the Chip.
Displaying Image Avatars in the Chip
To render an image as the Chip avatar, set the imageSrc property of the ChipAvatarSettings. You can also provide the alt attribute of the image by using the imageAltText property and set custom styling with the imageCssStyle option.
The following example demonstrates how to display an image avatar in the Chip.
Displaying Avatar Initials in the Chip
You can display initials in the avatar section of the Chip by using the initials option of the ChipAvatarSettings. To further customize the way the initials are rendered in the Chip, provide the desired styling to the initialsCssStyle property.
The following example demonstrates how to display avatar initials in the 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, or set removeIcon to a font icon class when you use font icons.
The following example demonstrates removable Chips with custom remove icons.