[Solved] How to set the SVG Icon Variant to use (Outline, Solid, Duotone)

[Andrew]

The SVG Icons Overview page explains how there are three different variants available, Outline, Solid, or Duotone.

If I create a kendo ui control using JQuery, it will use SVG fonts for the control's icons.

How do I tell the kendo framework to use, say, the Duotone icons?

There are currently inexplicable anomolies with the demonstrations. For example, the online example of the grid renders the icons as outline, but then if you press 'edit in dojo', it renders the icons as solid. Is this outside of my control how they render?

From https://demos.telerik.com/kendo-ui/grid/index

 But rendered in the dojo:

[Neli]

Hello Andrew,

The Kendo UI Demos currently use SVG Icons version 5.0.0, which is still in preview. In contrast, Kendo UI ships with SVG Icons version 4.9.2 by default. As a result, some icons may appear differently in the Demos compared to the Dojo because different icon package versions are being loaded.

If you are referencing icons from the Kendo CDN or npm and want to stay aligned with the demos, you can use version 5.0.0. If you prefer to stay aligned with the distributed source, continue using version 4.9.2 until the next official update. You will also need to set kendo.ui.svgIcons to window.KendoSVGIcons to enable the new icon styling. 

<script src="https://cdn.jsdelivr.net/npm/@@progress/kendo-svg-icons@5.0.0/dist/index.min.js"></script>
<script> kendo.ui.svgIcons = window.KendoSVGIcons;</script>

Note that this script should be invoked before Telerik components initialization.

You can also check the following article:

https://www.telerik.com/kendo-jquery-ui/documentation/backwards-compatibility/2026-backward-compatibility#kendo-ui-icons-package-version 

In case you have any additional questions on the matter, feel free to reach out. 

Regards,
Neli
Progress Telerik