Progress® Kendo UI® for jQuery Feedback Portal
Back to Feed
Request a Feature Report a Bug
Under Review
Last Updated: 30 Jun 2026 08:31 by ADMIN
Andrew
Created on: 12 Jun 2026 05:52
Category: Pager
Type: Bug Report
1
Pager buttons are an inconsistent mix of chevrons and filled in triangles

This problem can be easily demonstrated by looking at the page on the demonstration page, and then copying and pasting the same code into the kendo dojo.

The official demonstration page displays the buttons like so:

But the same code on the dojo displays the buttons like so:


As you can see, the demonstration page has a consistent style for all of the buttons, while the dojo page does not.

Both pages have the same classes on the icons:

  • k-svg-i-caret-alt-to-left
  • k-svg-i-chevron-left
  • k-svg-i-chevron-right
  • k-svg-i-caret-alt-to-right

The mixture of styles gives an unprofessional impression to the customer, and is preventing me from upgrading my codebase from version 2025.4.1321

For the simplest possible example, see this dojo snippet: https://dojo.telerik.com/aroNDBBv

Attached Files:
7 comments
ADMIN
Viktor Tachev
Posted on: 30 Jun 2026 08:31

Hi Andrew,

You are absolutely correct. Referencing only the updated SVG Icons script is not sufficient for the Kendo UI components to use the new icon set.

In addition to loading the script, you also need to override the default SVG icon collection by executing the following code:

if (window.KendoSVGIcons) {
	kendo.ui.svgIcons = window.KendoSVGIcons;
}

It is important that this code runs before any Kendo UI widgets are initialized, so that the components pick up the new icon definitions during their initialization.

You can see this approach in action in the following Dojo example:

https://dojo.telerik.com/dOMvTAJm/3

I apologize for overlooking this step in my previous reply. Please give this approach a try, and let me know if you encounter any further issues.

Regards,
Viktor Tachev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Andrew
Posted on: 26 Jun 2026 23:42

Hello Victor,

Your suggestion is to add the following script element:

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

This has no effect, and why do you think it would?

The kendo-svg-icons script happens to export a variable called "caretAltToLeftIcon".

    var caretAltLeftIcon = {
        name: 'caret-alt-left',
        content: '<path d="M15.67 19.67a.607.607 0 1 1-.86.858l-8.1-8.1a.607.607 0 0 1 0-.859l8.1-8.1a.607.607 0 0 1 .86.859L8 11.999z"/>',
        viewBox: '0 0 24 24',
        variants: {
            'solid': '<path d="M16.05 3.9v16.2a.81.81 0 0 1-1.384.574l-8.1-8.1a.81.81 0 0 1 0-1.146l8.1-8.1a.81.81 0 0 1 1.384.573z"/>',
            'outline': '<path d="M15.67 19.67a.607.607 0 1 1-.86.858l-8.1-8.1a.607.607 0 0 1 0-.859l8.1-8.1a.607.607 0 0 1 .86.859L8 11.999z"/>',
            'duotone': '<path d="M15.24 3.9v16.2L7.14 12z" opacity="0.2"/><path d="M15.55 3.151a.81.81 0 0 0-.884.175l-8.1 8.1a.81.81 0 0 0 0 1.146l8.1 8.1a.81.81 0 0 0 1.384-.573v-16.2a.81.81 0 0 0-.5-.749zm-1.12 14.993-6.145-6.145 6.145-6.145z"/>'
        }

 

But just because it offers to export this, it will have no effect on the script https://kendo.cdn.telerik.com/2026.2.520/js/kendo.all.min.js

This script has already bundled the icon from the older source, and is now hardcoded within the script.
It's minified, but I could still find it.

 

kre={name:`caret-alt-to-left`,content:`<path d="M352 384 160 256l192-128zM128 128v256h32V128z" />`


Can you either provide a working example of how I can override the icon, or at least admit there is no solution.


ADMIN
Viktor Tachev
Posted on: 24 Jun 2026 10:47

Hello Andrew,

If you are referencing the client-side resources through a CDN, you can update the SVG Icons package by replacing the current script reference with the following one:

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

This will load SVG Icons version 5.0.0, which is the version currently used in the Kendo UI demos. After updating the reference, the icons in your application should match those displayed in the demos.

Regards,
Viktor Tachev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Andrew
Posted on: 18 Jun 2026 23:54

Hello Viktor,

I don't understand how I can use these NPM packages.

The SVG icons are defined as strings in the supplied kendo javascript. 

For example:

 kre={
        name:`caret-alt-to-left`,
        content:`<path d="M352 384 160 256l192-128zM128 128v256h32V128z" />`,
        viewBox:`0 0 512 512`,
        variants:{solid:``,outline:``,duotone:``}
      },

 

 

How can I "use" version 5.0.0?

 

 

ADMIN
Viktor Tachev
Posted on: 18 Jun 2026 08:39

Hello Andrew,

The Kendo UI Demos currently use SVG Icons version 5.0.0, which is still in preview. In contrast, Kendo UI 2026.2.520 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.

For more information, please refer to 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,
Viktor Tachev
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Andrew
Posted on: 12 Jun 2026 23:24

Now that I have uploaded the images in a comment, I can display them here.

 

Here is how the pager buttons are supposed to look:

 

And here is how it actually looks:

 

Andrew
Posted on: 12 Jun 2026 23:22

I could see the pager images in the above forum post yesterday. (They were linked to this github case)

 

But today I cannot see the images in the forum post. SO here they are as attachments.

Attached Files:
Create an account Log In
View
Type
Status
Category