Chip Icon Options

Updated on Nov 6, 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 inside the Chip. For available icons, refer to the list of font icons.
• iconClass—Displays an icon from a CSS class, such as a FontAwesome icon.
• 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.

As of R2 2023 (v13.0.0) the default icon type in the Kendo UI for Angular components and Kendo UI themes is changed from font to svg. Set the svgIcon property, or Continue Using Font Icons.

SVG Icons

To display an SVG icon, set the svgIcon property of the Chip to the necessary SVGIcon.

html

<kendo-chip [svgIcon]="svgBell"> </kendo-chip>

ts

import { bellIcon } from '@progress/kendo-svg-icons';

public svgBell = bellIcon;

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

Example

View Source

Loading ...

Font Icons

To display a Font icon inside the Chip:

1. Use the ICON_SETTINGS token of the Icons package and set the icon type to font. For more information, go to the topic about icon settings.
2. Depending on the font icons library, you can set the:
   • icon property to a font icon in the Kendo UI theme.
     html

     <kendo-chip icon="bell"> </kendo-chip>

   • iconClass property to a third-party font icon library (such as FontAwesome).
     html

     <kendo-chip label="Bus" iconClass="fa fa-bus"></kendo-chip>

The following example demonstrates how to set the icon and iconClass properties of the Chip.

Example

View Source

Loading ...

Suggested Links

• Chip Customization
• Removable Chip
• Icon Settings
• API Reference of the Chip