Chip Icon Options

Updated on Nov 11, 2026

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—Displays an SVG icon inside the Chip. For available icons, refer to the list of SVG icons.
• icon—Displays a font icon from the Kendo UI theme. For available icons, refer to the list of font icons.
• removeSvgIcon and removeIcon—Replace the default remove icon of a removable Chip with an SVG or font icon. See Customizing the Remove Icon for more details.
• selectedSvgIcon and selectedIcon—Replace the default icon that appears when the Chip is selected with an SVG or font icon. See Customizing the Select Icon for more details.

SVG Icons

To display an SVG icon, set the svgIcon property of the Chip to the necessary 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.

Example

View Source

Loading ...

Font Icons

1. Load the font icons in your project so that the icon renders as expected.
2. Set the 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.

Example

View Source

Loading ...

Suggested Links

• API Reference of the Chip
• Toggleable Chip
• Disabled Chip