Using Font Awesome instead of Kendo UI Icons in the Grid
Environment
Product | Progress® Kendo UI Grid |
Description
How can I replace the default, built-in icons of the Angular Grid by Kendo UI with Font Awesome icons?
Solution
Starting with
v14.0.0
, font icons are no longer included in the Kendo UI themes. Font icons are now distributed through the@progress/kendo-font-icons
standalone package. To use font icons instead of SVG icons, follow the steps outlined in the Continue Using Font Icons section.
To override the built-in styling of the Kendo UI Grid for Angular, you can replace the content of the icon elements with your preferred Font Awesome icons. For example, to customize the expand and collapse icons for detail rows, use the following CSS:
.k-hierarchy-cell .k-i-plus::before {
content: "\\f149";
font-family: FontAwesome;
}
.k-hierarchy-cell .k-i-minus::before {
content: "\\f148";
font-family: FontAwesome;
}
The following example demonstrates how to implement Font Awesome icons in the Grid instead of the integrated font icons which are delivered by the Kendo UI suite for Angular.