Use Font Awesome instead of Kendo UI Icons

Some scenarios require you to replace the default, built-in icons of the Grid with Font Awesome icons.

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:

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

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

      // if used in SCSS, this can be reduced to
      // .k-hierarchy-cell .k-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.

Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?