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

To override the built-in styling of the Kendo UI Grid for Angular, replace the content of the elements which are responsible for the rendering of the respective icons. For example, to replace the expand or collapse detail row icons, use the following approach:

html

  styles: [`
      .k-hierarchy-cell .k-i-plus::before {
        content: "\\f149";
        font-family: FontAwesome;
      }

      .k-hierarchy-cell .k-i-minus::before {
        content: "\\f148";
        font-family: FontAwesome;
      }

      // If used in SCSS, this can be reduced to
      // .k-hierarchy-cell .k-i-plus::before { @extends .fa-expand; }
  `]

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 ...