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's font
icon with a Kendo svg
icon:
- Import the necessary SVG icon from the
@progress/kendo-svg-icons
package.The name of an SVG icon represents the associated font icon's name in camelCase and ends with the word "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
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.
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 through a CDN link.
-
Use the
ICON_SETTINGS
token of the@progress/kendo-angular-icons
package and set the icon type tofont
—this will configure the Kendo UI 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 {}