Content Setup

The Chip component allows you to set its textual content and icons according to the specific project requirements.

To configure the Chip content, use the available options for setting its content elements:

• Icons
• Text

Setting the Icons

Depending on the configuration of the project, you can enhance the content of the Chip by displaying any of the following icon types:

• SVG icons
• Font icons
• Third-party library icons

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.

Displaying SVG Icons

To display an SVG icon inside the Chip, set the svgIcon property or use the removeSvgIcon to set the Remove icon of the Chip to the necessary SVGIcon. For details, go to the list of SVG icons supported by Kendo UI for Angular.

html

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

ts

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

public svgBell = bellIcon;
public svgX = xIcon;

The following example demonstrates how to set the svgIcon and removeSvgIcon properties of the Chip.

Change Theme

Theme

Loading ...

Displaying 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 or removeIcon properties to a font icon in the Kendo UI theme. For details, go to the list of font icons supported by Kendo UI for Angular.
     html

     <kendo-chip icon="bell" removeIcon="x"> </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, removeIcon, and iconClass properties of the Chip.

Change Theme

Theme

Loading ...

Setting the Text

To configure the Chip textual content, use any of the following approaches:

• Pass a string
• Define custom content

Passing a String

Passing a string to the label field is the basic way to display a chunk of text in the Chip. The text that is passed represents the rendered content of the component.

Change Theme

Theme

Loading ...

Defining Custom Content

You can also define any custom content as a label between the <kendo-chip> tags.

Change Theme

Theme

Loading ...

Suggested Links

• API Reference of the Chip