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 font icon with a Kendo svg icon:

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

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

   The SVG icon name represents the font icon name in camelCase and ends with 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 field.
   html

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

Replacing Standalone Kendo Icons

In case you have a standalone 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 by using a CDN link.

2. Use the ICON_SETTINGS token of the Icons package and set the icon type to font—this will set the Kendo 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 {}

Loading Icons through Precompiled CSS

1. To load the font icons by using precompiled CSS, install the Kendo Font Icons package through NPM.

   sh

   npm i @progress/kendo-font-icons

2. Import the precompiled CSS by using one of the following options:

   • Import the font icons in the angular.json file.

     json

     "styles": [
         ...
         {
             "input": "node_modules/@progress/kendo-font-icons/dist/index.css"
         }
     ],

   • Import the font icons in the styles.scss file.

     scss

     @import "@progress/kendo-font-icons/dist/index.css";

Loading Icons through a CDN

Import the font icons by using the following CDN link in your index.html file.

html

<link
    rel="stylesheet"
    href="https://unpkg.com/@progress/kendo-font-icons/dist/index.css"
/>

Suggested Links

• SVG Icons
• Font Icons
• Icon Settings