Grid Filter Row Operator Select Button is not showing the icon.

[Noah]

The button next to the textbox in the filter row column is not showing the filter icon.  I can recreate this with a brand new angular 16 standalone project and add the most basic grid with filtering.  The filter row looks like the below. Notice the icon to clear filters shows, but the icon on the dropdown doesn't.  When I inspect, it looks like the clear button that works is using an SVG but the other is trying to use a span with class k-i-filter class which doesn't seem to be working.

 

[Razvan]

Same thing for me after updating to Angular 16 and Kendo UI 13.

[Jagadish]

I too face the same issue. Currently my project uses 13.5. Should i remain with this version or upgrade to the latest version to fix this issue?

[Martin Bechev]

Hi all,

Please make sure the latest version of the packages are being used:
For all @progress/kendo-angular-{{pacakgeName}} the latest version is 14.1.0 (at the time of writing the response).

For all themes @progress/kendo-theme-{{themeName}} the latest us 7.0.2

Use the following script to update all Kendo-related packages:

npx npm-check-updates --upgrade --filter "/@progress.*/"

https://www.telerik.com/kendo-angular-ui/components/installation/up-to-date/#toc-updating-to-latest-versions

The components have used SVG icons as default icons since R2 2023:

https://www.telerik.com/kendo-angular-ui/components/icons/icon-settings/

In case font icon type is preferred, follow the instructions from this section and continue to use font icons only:

https://www.telerik.com/kendo-angular-ui/components/icons/icon-settings/#toc-using-font-icons

In v7 of the themes we detached the font icons from the package:

https://github.com/telerik/kendo-themes/releases/tag/v7.0.0

Now if anywhere in the app, font icons are used, the developer needs to install the font icons package:

npm i @progress/kendo-font-icons

and load it into the app:

https://www.telerik.com/kendo-angular-ui/components/styling/icons/#toc-loading-icons-through-precompiled-css

Let me know how it goes.

[Yanmario]

Hi Noah and Razvan,

I've set up a new project using the most recent versions, but the button icons appear correctly on my end. Feel free to check the attached project.

I would suggest to update all of our components and Kendo Themes to their latest versions using the following command:

npx npm-check-updates --upgrade --filter "/@progress.*/"

https://www.telerik.com/kendo-angular-ui/components/installation/up-to-date/#toc-updating-to-latest-versions

If font icons are used, please check the following documentation as there were recent changes:

https://www.telerik.com/kendo-angular-ui/components/styling/icons/#toc-setup

If the issue still persists, could you both share a runnable example, where I can troubleshoot the project and provide further assistance? Thank you in advance for your cooperation.

Regards,
Yanmario
Progress Telerik

[Razvan]

I managed to fix the issue by upgrading Kendo UI packages from 13.5 to 14.0, so it might be related to the 13.5 or to the combination of dependencies.

Note:
Could not update `@progress/kendo-svg-icons` to latest ("^2.0.0") because the dependencies were broken. I looked over your provided demo project and it seems you have it at "^1.0.0".

[Martin Bechev]

Hi Razvan,

Thank you for the heads up.

We noticed that a couple of days ago and can assure you that we are currently working on it.

In the meantime stick to v1.0.0.

Regards.

[Noah]

latest version has fixed it.