1 Answer, 1 is accepted
Hi, Akiva,
Currently, this can be achieved by targeting the .k-icon class with the ::before selector and passing the required icon as content:
.k-grid-column-menu.k-grid-filter .k-icon::before {
content: 'fas fa-cloud';
color: red;
}For your convenience I have prepared the following example that showcases this approach:
https://stackblitz.com/edit/react-ubtbq2-eywiry?file=app/styles.css
I hope this helps.
Regards,
Filip
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.
Rank 4
Bronze
Iron
Iron
Hi Filip!
I am trying to upgrade to Kendo 6.1 but having trouble getting this feature back to working condition (we're upgrading from v4 so lots of little details to update) - I updated the StackBlitz to latest KendoReact packages here for your convenience to show the problem: https://stackblitz.com/edit/react-ubtbq2-r8svtt?file=app%2Fstyles.css
Thank you in advance for your time!
Hi, Janki,
This is because in the R2 2023 release, we replaced font icons with SVG icons.
Currently, you can change the `columnMenu` icon or any other one by wrapping the rendered component with an `IconsContext.Provider` and setting the `value.icons` property:
For more information about migrating from font icons to SVG icons, you can check the following article:
I hope this helps.
Regards,Wissam
Progress Telerik