Using Font Awesome instead of Kendo UI Icons in the Grid

Environment

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:

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