New to Kendo UI for Angular? Start a free 30-day trial

Migrating Font Icons to SVG Icons

With the R2 2023 release, the default icon type in the Kendo UI for Angular components and Kendo UI themes is changed from font to svg. This change marks the next milestone in a series of improvements related to Content Security Policy (CSP).

In this article, you will find more details about how to:

For more information on using SVG and font icons, visit their dedicated articles:

With the R3 2023 release, the fonts will no longer be delivered with the Kendo UI for Angular and Kendo UI themes.

Switching to SVG Icons

Migration from font to SVG icon type requires some changes when:

Replacing Standalone Kendo Font Icons

In case you have a standalone icon that uses an HTML element with a dedicated CSS icon class selector or <kendo-icon> component like:

<span class="k-icon k-i-camera"></span>
<kendo-icon name="camera"></kendo-icon>

In R2 2023 release and later versions, use the <kendo-svg-icon> component instead.

import * as svgIcons from '@progress/kendo-svg-icons';

export class AppComponent {
    public allIcons = svgIcons;
<kendo-svg-icon [icon]="allIcons.cameraIcon"></kendo-svg-icon>

Customizing Standalone Kendo Font Icons

The following example demonstrates a standalone font icon with a CSS rule that customizes the color of the font icon prior R2 2023 release:

<span class="k-icon k-i-camera"></span>
.k-icon.k-i-camera {
    color: red;

To customize an SVG icon in R2 2023 and later versions, use .k-svg-icon CSS selector and the respective SVG icon selector.

<kendo-svg-icon [icon]="allIcons.cameraIcon"></kendo-svg-icon>
.k-svg-icon.k-svg-i-camera {
    color: red;

Continue Using Font Icons

To continue using Kendo font icons as the default icon type, use the ICON_SETTINGS token of the Icons package and set the icon type to font.

    providers: [{ provide: ICON_SETTINGS, useValue: { type: 'font' } }]
export class AppModule {}