Migrating Font Icons to SVG Icons
With the R2 2023 release, the default icon type in the Kendo UI for Vue Native components and Kendo UI themes 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:
For more information on using SVG and font icons, visit their dedicated documentation articles:
With the R3 2023 release, the fonts will no longer be delivered within the Kendo UI for Vue suite and Kendo UI themes.
Switching to SVG Icons
Migration from font to SVG icon type requires some changes to be applied. Here is a list of scenarios you may encounter:
- Replacing Standalone Kendo Font Icons
- Customizing Standalone Kendo Font Icons
- Continue Using Font Icons
Replacing Standalone Kendo Font Icons
In case you have a standalone icon that uses an HTML element with a dedicated CSS icon class selector or FontIcon component like:
<span class="k-icon k-i-camera"></span>
<FontIcon :name="'camera'" />In R2 2023 release and later versions, use the SvgIcon component instead.
<template>
<div>
<SvgIcon :icon="svgIcons.cameraIcon" />
</div>
</template>
<script>
import { SvgIcon } from "@progress/kendo-vue-common";
import * as svgIcons from "@progress/kendo-svg-icons";
export default {
components: {
SvgIcon,
},
data() {
return {
svgIcons,
};
},
};
</script>Customizing Standalone Kendo Font Icons
The following example demonstrates a standalone font icon with a CSS rule that customizes the color of the font icon prior R2 2023 release:
<span class="k-icon k-i-camera"></span>.k-icon.k-i-camera {
color: red;
}To customize an SVG icon in R2 2023 and later versions, use .k-svg-icon CSS selector and the respective SVG icon selector.
<SvgIcon :icon="svgIcons.cameraIcon" />.k-svg-icon.k-svg-i-camera {
color: red;
}Continue Using Font Icons
To continue using Kendo UI for Vue Native Font icons as the default icon type, use the Vue.js provider and set the icon type to font, by implementing a code like this:
provide() {
return {
kendoIcons: {
type: 'font',
},
};
}More details about the customization of the Kendo UI for Vue Native Icons can be found on this Special Scenarios article.
