Migrating from Font Icons to SVG Icons

Starting with version R2 2023, the default icon type in the Telerik and Kendo UI themes has changed from font to svg. This release marks the next milestone in a series of improvements related to Content Security Policy (CSP) in Telerik UI for ASP.NET Core.

In this article, you will learn how to start using SVG icons. To continue using font icons, you can change the type of the icons to font.

For more information on using SVG and font icons, visit their dedicated articles:

• SVG Icons
• Font Icons

Switching to SVG Icons

When migrating from font icons to SVG icons, you will face two possible scenarios:

1. The font icons that you use currently are not customized.

   The following example shows a font icon without customizations used in Telerik UI for ASP.NET Core versions prior to R2 2023:

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

   To set an SVG icon in R2 2023 and later versions, use the kendo.ui.icon utility:

   <span id="icon"></span> 
   
   <script> 
   kendo.ui.icon($("#icon"), { icon: 'camera' }); 
   </script> 
   

2. The font icons that you use currently are customized.

   The following example shows a font icon with a CSS rule that customizes the color of the font icon in Telerik UI for ASP.NET Core versions prior to R2 2023:

   <style> 
       .k-icon { 
       color: red !important; 
       } 
   </style> 
   
   <span class="k-icon k-i-camera"></span> 
   

   To set an SVG icon in R2 2023 and later versions, replace the font icon with an SVG icon by using kendo.ui.icon or add .k-svg-icon to the selector.

   <script> 
       kendo.setDefaults('iconType', 'svg');
   </script> 
   
   <style> 
   .k-icon,
   .k-svg-icon { 
       color: red !important; 
   } 
   </style> 
   
   <span id="icon"></span>
   
   <script>
       kendo.ui.icon($("#icon"), { icon: 'camera' }); 
   </script>
   

Continuing with Font Icons

To continue using font icons as the default icon type, call the kendo.setDefaults method:

<script>
    kendo.setDefaults('iconType', 'font');
</script>

Alternatively, you can set the default icon type in the minimal hosting model of the application.

    services.AddKendo(x =>
    {
        x.IconType = IconType.Font;
    });

See Also

• Themes Overview
• SVG Icons
• Font Icons