# 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-angular-ui-develop/components/buttons/api/chipcomponent#svgicon)—Displays an SVG icon inside the Chip. For available icons, refer to the [list of SVG icons](https://www.telerik.com/kendo-angular-ui-develop/components/icons/svgicon/svgicon-list).
* [`icon`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/chipcomponent#icon)—Displays a font icon inside the Chip. For available icons, refer to the [list of font icons](https://www.telerik.com/kendo-angular-ui-develop/components/icons/icon/icon-list).
* [`iconClass`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/chipcomponent#iconclass)—Displays an icon from a CSS class, such as a [FontAwesome](https://fontawesome.com/) icon.
* [`removeSvgIcon`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/chipcomponent#removesvgicon) and [`removeIcon`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/chipcomponent#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-angular-ui-develop/components/buttons/chip/customization#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](https://www.telerik.com/kendo-angular-ui-develop/components/styling/migrating-font-svg#continue-using-font-icons).

## SVG Icons

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

```html example.component.html
<kendo-chip [svgIcon]="svgBell"> </kendo-chip>
```

```ts example.component.ts
import { bellIcon } from '@progress/kendo-svg-icons';

public svgBell = bellIcon;
```

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

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

### Font Icons

To display a Font icon inside the Chip:

1. Use the [`ICON_SETTINGS`](https://www.telerik.com/kendo-angular-ui-develop/components/icons/api/icon_settings) token of the Icons package and set the icon type to `font`. For more information, go to the topic about [icon settings](https://www.telerik.com/kendo-angular-ui-develop/components/icons/icon-settings).
2. Depending on the font icons library, you can set the:
   * [`icon`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/chipcomponent#icon) property to a font icon in the Kendo UI theme.
     ```html
     <kendo-chip icon="bell"> </kendo-chip>
     ```
   * [`iconClass`](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/chipcomponent#iconclass) property to a third-party font icon library (such as [FontAwesome](https://fontawesome.com/)).
     ```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.

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

## Suggested Links

* [Chip Customization](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/chip/customization)
* [Removable Chip](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/chip/remove)
* [Icon Settings](https://www.telerik.com/kendo-angular-ui-develop/components/icons/icon-settings)
* [API Reference of the Chip](https://www.telerik.com/kendo-angular-ui-develop/components/buttons/api/chipcomponent)