The Future of Icons in Telerik and Kendo UI Themes

Read about the strategy for improving Telerik and Kendo UI web component libraries by moving from font icons to SVG icons.

As part of our continuous efforts to improve the Telerik and Kendo UI products’ quality, theming mechanism and Content Security Policy (CSP) compliance, we are planning to transition gradually from font icons to SVG icons.

In the current blog post, we would like to share with you upcoming changes to our products’ themes and icon system, let you know about the benefits of this update, and provide a timeline of these changes along with preparation resources.

Why Switch to SVG Icons?

We understand that font icons have been a popular choice for many of our customers, offering easy-to-use and customizable icons, which imposed certain styling limitations.

SVG icons have several benefits over font icons that make them a more efficient and secure choice for modern web development. For example, SVG icons are resolution-independent, meaning they display clearly on any device, regardless of screen size or resolution. They are also lightweight and load faster than font icons, which can significantly improve website performance and reduce page load times.

Moreover, SVG icons are more secure than font icons as they allow us to achieve strict Content Security Policy (CSP) compliance. By eliminating the font icon inline scripts present in themes, we can reduce the security risk and improve overall CSP compliance.

What If I Plan to Keep Using Font Icons?

For those of you who need to continue using the font icons, you can continue to do so using one of the approaches mentioned in the Resources section below.

Which Products Will Be Impacted?

All of the Telerik and Kendo UI web products excluding UI for ASP.NET AJAX will receive improvement in the icon mechanism within the UI components and theming:

• Telerik UI for ASP.NET MVC
• Telerik UI for ASP.NET Core
• Telerik UI for Blazor
• Kendo UI for jQuery
• Kendo UI for Angular
• KendoReact
• Kendo UI for Vue

Timeline of Changes

In the section below you will find a summary of the upcoming changes and their impact.

Step 1: SVG Icons (R1 2023 – January 2023)

Starting in R1 2023, we introduced and started incorporating SVG icons into Telerik and Kendo UI products. We provided a global configuration setting that enables you to keep the current default font icon type, but also allows you to render SVG icons.

Step 2: SVG Icons as Default in Telerik and Kendo UI Components (R2 2023 – June 2023)

With R2 2023, we will perform a change in the default type of icons in Telerik and Kendo UI libraries and components from font to SVG. This change marks the next milestone in a series of improvements related to Content Security Policy (CSP).

Step 3: Detach Font Icons from Themes (R3 2023 – October 2023)

With R3 2023, we aim to extract the Font icons as a separate package and detach the inline font declaration from the Telerik and Kendo UI themes.

Important to note is that the themes will continue to support both font and SVG icons in components, thus allowing you to decide which type of icons to take advantage of. However, using the font icons will require a separate stylesheet to be referenced by clients.

These last bits of changes will allow us to provide our customers with a more secure and efficient icon system and the option to load and reference only needed resources.

Migration Resources Related to Font Icons to SVG Icons

We have already made available documentation articles for all products related to the steps that you need to take regarding the planned change in font and SVG icons in Telerik and Kendo UI libraries.

Depending on the products you are currently using, you can review details in the listed articles below related to switching to SVG icons or continuing to use font icons if you prefer. Please note that these resources will be continuously updated with the needed information as we execute the planned roadmap:

Telerik UI

• Telerik ASP.NET Core Migrating from Font Icons to SVG Icons
• Telerik UI for ASP.NET MVC Migrating from Font Icons to SVG Icons
• Telerik UI for Blazor Migrating from Font Icons to SVG Icons

Kendo UI

• Kendo UI for Angular Migrating from Font Icons to SVG Icons
• Kendo UI for jQuery Migrating from Font Icons to SVG Icons
• KendoReact Migrating from Font Icons to SVG Icons
• Kendo UI for Vue Migrating from Font Icons to SVG Icons

In Conclusion

We understand that this transition may require some adjustments on your end, but we believe that the benefits of using SVG icons and their detachment from themes will ultimately provide a better user experience for our customers. To help you make the transition as smooth as possible, we will be providing support and resources throughout the migration process.

We are committed to providing the highest quality products and services, and we appreciate your continued support as we make these updates. If you have any questions or concerns about these changes, please do not hesitate to reach out to Telerik and Kendo UI customer support teams.