# ChipList Customization

The ChipList provides options for customizing the Chip rendered for each of its items.

The component enables you to:

* [Render custom Chips](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/chiplist/customization#rendering-chips)
* [Display icons](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/chiplist/customization#displaying-icons)
* [Display avatars](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/chiplist/customization#displaying-avatars)

## Rendering Chips

By passing your own Vue component to the [`chip`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chiplistprops#chip) prop, you can add item-specific styling or content. The component receives the [`ChipProps`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chipprops) of the item, including [`dataItem`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chipprops#dataItem), [`text`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chipprops#text), and [`value`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chipprops#value). Render the `Chip` component with the received props to retain its built-in behavior.

The following demo colors each Chip based on its item data.

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

## Displaying Icons

The ChipList does not map icon fields automatically. To display an icon that varies by item, map a field from `props.dataItem` to the Chip's [`svgIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chipprops#svgIcon) or [`icon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chipprops#icon) prop in the custom slot.

### Using SVG Icons

Use the Chip's [`svgIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chipprops#svgicon) prop for an SVG icon definition. For available icons, see the [list of SVG icons](https://www.telerik.com/design-system/docs/foundation/iconography/icon-list/). The following demo maps each item's `icon` field to `svgIcon`.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/chiplist/icons/source.txt)

### Using Font Icons

Use the Chip's [`icon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chipprops#icon) prop for a font icon name. For available icons, see the [list of font icons](https://www.telerik.com/design-system/docs/foundation/iconography/icon-list/). The following demo maps each item's `icon` field to `icon`.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/chiplist/font-icons/source.txt)

## Displaying Avatars

To display an avatar for each item, pass a custom Chip through `chip` and set its [`avatar`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chipprops#avatar) prop to an object with `imageUrl` and `imageAlt`. Use `rounded` to configure the shape of the avatar.

The following demo displays an image avatar in each Chip.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/buttons/chiplist/appearance/avatar/source.txt)

## Suggested Links

* [ChipList Appearance](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/chiplist/appearance)
* [Chip Customization](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/chip/customization)
* [Chip Icon Options](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/chip/icons)
* [API Reference of the ChipList](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chiplistprops)
* [API Reference of the Chip](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chipprops)