Change filter Icon on kendo-data-query

[Mariana]

Hi, I am using filterBy from @progress/kendo-data-query to allow filtering of the data displayed in my kendo-react-grid. For more intuitive UI, i'd like to change the icon for this from a filter to a search magnifying glass. Is this possible? I saw some other Q/As related to this but they all suggested editing the css.... my file uses makeStyles instead for styling so I wasn't sure how to proceed. Let me know if you have suggestions for how to do this. 

 

[Konstantin Dikov]

Hello Mariana,

You can try to load GlobalStyles to override the "content" of the filter icon ":before" selector with a different icon from our icon fonts:

• https://www.telerik.com/kendo-react-ui/components/styling/icons/

For your convenience, I have prepared a simple example demonstrating how you can use GlobalStyles to change the icon:

• https://stackblitz.com/edit/react-b6ofm9?file=app/main.jsx

As for the makeStyles, I am not sure if there is a way of adding global styles in a similar manner, but the idea is to add custom CSS that overrides the content of the icon.

 

Regards,
Konstantin Dikov
Progress Telerik

[Mariana]

thanks so much! adding global styles worked