Hello,
I am trying to style and size the sort arrow icon that Kendo provides in the react data grid. I have attached a picture of the specific arrow I am talking about. I have managed to change the color of the sort icon with the CSS below, howerver I have not figured out how to change the sizing of the arrow here. If possible, I would also like to adjust the icon shape (make it thicker and shorter), and maybe use a custom icon for it if possible. Can you advise me on some possible solutions I could implement? Thank you.
}
1 Answer, 1 is accepted
Hi, Matthew,
You can change the SVG icon size by setting the scale of the following class:
th.k-table-th.k-header.k-sorted > span > span > span.k-sort-icon > span > svg {
color: blue;
scale: 3 1.5;
}Here is an example of this approach. You can apply further customizations based on your use case scenario:
Another approach would be to render a custom larger sort SVG icon. In order to replace the `sortAscSmallIcon` and `sortDescSmallIcon` SVG icons, you will need to wrap the rendered component with an `IconsContext.Provider` and set the `value.icons` property to the custom SVG. Here is an example where I am replacing the ascending sort icon with an inflatable icon. You can replace it with a larger sort arrow icon:
For more information about the icon rendering changes and using SVG icons, I would suggest checking the following articles:
- https://www.telerik.com/blogs/future-icons-telerik-kendo-ui-themes
- https://www.telerik.com/kendo-react-ui/components/styling/migrating-font-svg/
- https://www.telerik.com/kendo-react-ui/components/utils/svgicon/
I hope this matches what you need, but please let me know if you have any further questions on this matter.
Regards,
Wissam
Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!