Kendo icons not showing after update of Kendo and Angular 14

[Petar]

Hello,

I have a problem with Kendo icons (k-icon k-i-menu etc.) which are now not showing after the latest update of Kendo and Angular to Angular 14.

This is what is showing (just rectangles) and it was working fine until now. I have not changed anything in the app related to fonts or icons so I don't really know where to search for the problem. I've tried rollback of the Kendo theme to the last version I had before the issue, but it didn't work. I have the issue in 3 different browsers.

 

This is the code i have in my angular.json loading kendo-theme-material v5.8.1

"styles": [{
                                "input": "node_modules/@progress/kendo-theme-material/dist/all.css",
                                "inject": true
                            },
                            "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
                            "./node_modules/bootstrap/dist/css/bootstrap.css",
                            "./node_modules/ngx-toastr/toastr.css"
                        ],

and the icons in my html are with class k-icon in combination with k-i-menu or other icons, which up until now have worked perfectly fine.

Can you help me solve the problem or at least give me some guidelines to what might be causing it?

Thanks

[Petar]

The icons showed up fine up until the update of all Kendo modules to their last versions (kendo-theme-material updated from v.5.1.1 to v.5.8.1).

Angular version before and after the update 13-14.

[Yanmario]

Hi Petar,

Answer to the issue was provided in ticket id - 1582819. A runnable example would be required as everything is working on our side with the latest versions of our components and Kendo Themes.

Regards,
Yanmario
Progress Telerik     

[Sheree]

Could you please elaborate on the answer to the issue in "ticket id - 1582819" as I am facing the same issue.

 

Regards

Sheree

[Yanmario]

Hi Sheree,

This question was also raised in a private discussion and reproduction of the issue was not provided. It is possible that it was resolved by updating or reinstalling all dependencies, but without an example of such issues, it is hard to provide precise solutions/suggestions.

It is also worth mentioning that there is one major change that happened last year and that was moving from font icons to SVG icons:

https://www.telerik.com/kendo-angular-ui/components/styling/migrating-font-svg/

and the font icons are no longer part of our Kendo Themes:

https://www.telerik.com/kendo-angular-ui/components/styling/migrating-font-svg/#toc-continue-using-font-icons

This might cause issues with old projects when updating to our latest versions and some adjustments might be needed.

Regards,
Yanmario
Progress Telerik