# Chip Customization

The Chip provides options for customizing its avatar and its remove icon.

The component enables you to:

* [Display avatars](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/chip/customization#displaying-avatars)
* [Customize the remove icon](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/chip/customization#customizing-the-remove-icon)

## 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`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/chipcomponent#avatarsettings) property.

The `avatarSettings` property accepts an object of type [`ChipAvatarSettings`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/chipavatarsettings), which provides the following configuration options:

* `cssStyle`—Sets the CSS styles applied to the wrapper element of the Chip avatar.
* `imageAltText`—Sets the `alt` attribute 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`, the `avatarClass` property is no longer available and is replaced with the `avatarSettings` option. For earlier versions, you can still use the `avatarClass` property 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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/buttons/chip/customization/avatars/source.txt)

### 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.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/buttons/chip/customization/avatars/initials/source.txt)

## 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`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/chipcomponent#removable) to `true`. Set [`removeSvgIcon`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/chipcomponent#removesvgicon) to an [`SVGIcon`](https://www.telerik.com/kendo-angular-ui-develop/components/icons/api/svgicon), or set [`removeIcon`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/chipcomponent#removeicon) to a font icon class when you use font icons.

The following example demonstrates removable Chips with custom remove icons.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/buttons/chip/customization/remove_icon/source.txt)

## Suggested Links

* [Chip Content Setup](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/chip/content)
* [Removable Chip](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/chip/remove)
* [API Reference of the Chip](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/chipcomponent)