Migrating Font Icons to SVG Icons

The article provides a step-by-step guide on how to migrate font icons to svg icons.

With the R2 2023 (June 2023) release, the default icon type in the Kendo UI for Angular components 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:

• Switch to SVG Icons
• Continue Using Font Icons

Switching to SVG Icons

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

• Replacing Kendo Component Icons
• Replacing Standalone Kendo Icons
• Styling Standalone Kendo Icons

Replacing Kendo Component Icons

To replace a Kendo UI for Angular component's font icon with a Kendo svg icon:

1. Import the necessary SVG icon from the @progress/kendo-svg-icons package.
   ts

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

   The name of an SVG icon represents the associated font icon's name in camelCase and ends with the word "Icon".
   • The gearIcon SVG icon corresponds to gear font icon.
   • The alignCenterIcon SVG icon corresponds to align-center font icon.
2. Assign the imported SVG icon to a variable of type SVGIcon.
   ts

   public gearSVG: SVGIcon = gearIcon;

3. Replace the icon option of the component with the svgIcon property and bind the corresponding SVGIcon variable.
   html

   <button kendoButton [svgIcon]="gearSVG"></button>

Replacing Standalone Kendo Icons

In case you have a standalone font icon that uses:

• an HTML element with a dedicated CSS icon class selector
  html

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

• the standalone <kendo-icon> component.
  html

  <kendo-icon name="camera"></kendo-icon>

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

ts

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

export class AppComponent {
    public allIcons = svgIcons;
}

html

<kendo-svg-icon [icon]="allIcons.cameraIcon"></kendo-svg-icon>

Styling Standalone Kendo Icons

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

html

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

css

.k-icon.k-font-icon.k-i-camera {
    color: red;
}

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

html

<kendo-svg-icon [icon]="allIcons.cameraIcon"></kendo-svg-icon>

css

.k-svg-icon.k-svg-i-camera {
    color: red;
}

Continue Using Font Icons

With v14.0.0, introduced in the R3 2023 (October 2023) release, the fonts icons will no longer be delivered with the Kendo UI themes.

To use font icons instead of SVG icons:

1. Load the font icons either by using the precompiled CSS or through a CDN link.

2. Use the ICON_SETTINGS token of the @progress/kendo-angular-icons package and set the icon type to font—this will configure the Kendo UI font icons as the default icon type.

   ts

   import { ICON_SETTINGS } from "@progress/kendo-angular-icons";
   
   @NgModule({
       ...
       providers: [{ provide: ICON_SETTINGS, useValue: { type: 'font' } }]
   })
   export class AppModule {}

Suggested Links

• Angular SVG Icon Component Overview
• Angular Font Icon Component Overview
• Angular Icon Settings