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.

   Copy Codeimport { 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.

   Copy Codepublic gearSVG: SVGIcon = gearIcon;

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

   Copy Code<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

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

• the standalone <kendo-icon> component.

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

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

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

export class AppComponent {
    public allIcons = svgIcons;
}

Copy Code<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:

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

Copy Code.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.

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

Copy Code.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.

   Copy Codeimport { 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.

   Copy Codenpm 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.

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

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

     Copy Code@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.

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

Suggested Links

• SVG Icons
• Font Icons
• Icon Settings