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:

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.

Change Theme

Theme

Loading ...