# Chip Icon Options

You can enhance the textual content of the Chip by displaying SVG icons or font icons.

The Chip provides the following options to set an image or icon inside the component:

* [`svgIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chipprops#svgIcon)—Displays an SVG icon inside the Chip. For available icons, refer to the [list of SVG icons](https://www.telerik.com/kendo-vue-ui-develop/components/icons/svgicon/svgicon-list).
* [`icon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chipprops#icon)—Displays a font icon from the Kendo UI theme. For available icons, refer to the [list of font icons](https://www.telerik.com/design-system/docs/foundation/iconography/icon-list/).
* [`removeSvgIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chipprops#removeSvgIcon) and [`removeIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chipprops#removeIcon)—Replace the default remove icon of a removable Chip with an SVG or font icon. See [Customizing the Remove Icon](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/chip/customization#customizing-the-remove-icon) for more details.
* [`selectedSvgIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chipprops#selectedSvgIcon) and [`selectedIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chipprops#selectedIcon)—Replace the default icon that appears when the Chip is selected with an SVG or font icon. See [Customizing the Select Icon](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/chip/customization#customizing-the-select-icon) for more details.

## SVG Icons

To display an SVG icon, set the [`svgIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chipprops#svgicon) property of the Chip to the necessary [`SVGIcon`](https://www.telerik.com/kendo-vue-ui-develop/components/icons/api/svgicon).

```vue
<script setup>
import { Chip } from '@progress/kendo-vue-buttons';
import { filterIcon } from '@progress/kendo-svg-icons';
</script>

<template>
    <Chip :text="'Filter'" :svg-icon="filterIcon" />
</template>
```

The following example demonstrates how to set an SVG icon inside the Chip.

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

## Font Icons

1. [Load the font icons in your project](https://www.telerik.com/design-system/docs/foundation/iconography/font-icons/#usage) so that the icon renders as expected.
2. Set the [`icon`](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chipprops#icon) property to the name of a font icon.
   ```vue
   <Chip :text="'Events'" :icon="'calendar'" />
   ```

The following example demonstrates how to set a font icon inside the Chip.

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

## Suggested Links

* [API Reference of the Chip](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/api/chipprops)
* [Toggleable Chip](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/button/toggleable)
* [Disabled Chip](https://www.telerik.com/kendo-vue-ui-develop/components/buttons/button/disabled-state)