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
tosvg
. 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:
Switching to SVG Icons
Migration from font
to svg
icon type requires some changes when:
Replacing Kendo Component Icons
To replace a Kendo UI for Angular component font
icon with a Kendo svg
icon:
- Import the necessary SVG icon from the
@progress/kendo-svg-icon
package.The SVG icon name represents the font icon name in camelCase and ends with Icon.tsimport { gearIcon } from '@progress/kendo-svg-icons';
- The
gearIcon
SVG icon corresponds togear
font icon. - The
alignCenterIcon
SVG icon corresponds toalign-center
font icon.
- The
- Assign the imported SVG icon to a variable of type
SVGIcon
.tspublic gearSVG: SVGIcon = gearIcon;
- Replace the
icon
option of the component with thesvgIcon
property and bind the correspondingSVGIcon
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.
import * as svgIcons from '@progress/kendo-svg-icons';
export class AppComponent {
public allIcons = svgIcons;
}
<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:
<span class="k-icon k-font-icon k-i-camera"></span>
.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.
<kendo-svg-icon [icon]="allIcons.cameraIcon"></kendo-svg-icon>
.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:
-
Load the font icons either by using the precompiled CSS or by using a CDN link.
-
Use the
ICON_SETTINGS
token of the Icons package and set the icon type tofont
—this will set the Kendo font icons as the default icon type.tsimport { ICON_SETTINGS } from "@progress/kendo-angular-icons"; @NgModule({ ... providers: [{ provide: ICON_SETTINGS, useValue: { type: 'font' } }] }) export class AppModule {}
Loading Icons through Precompiled CSS
-
To load the font icons by using precompiled CSS, install the
Kendo Font Icons
package through NPM.shnpm i @progress/kendo-font-icons
-
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.
<link
rel="stylesheet"
href="https://unpkg.com/@progress/kendo-font-icons/dist/index.css"
/>