Search code examples
kendo-uikendo-ui-angular2

Kendo for Angular2: How to replace grid sort icon with kendo glyphicon

In Kendo for Angular 2, how do you replace the grid's column sort icon, which is currently a arrow, with Kendo Glyphicons?

I tried this in my scss file, but it did not work

.k-grid-header .k-header .k-link > .k-icon {
    background-image: none; /* remove Kendo's sprite image */
    font-family: KendoUIGlyphs;
}

.k-grid-header .k-header .k-link > .k-icon.k-i-sort-desc::before {
    content: '\e61a'; /* KendoUIGlyphs down arrowhead */
}

.k-grid-header .k-header .k-link > .k-icon.k-i-sort-asc::before {
    content: '\e618'; /* KendoUIGlyphs up arrowhead */
}
Solution

  • The default arrows in Kendo UI for Angular 2 use font icons, so there is no need to change the font-family or remove the sprite image. Instead, just set the pseudo-element content:

    .k-grid-header .k-i-arrow-n::before {
  content: '\e61a';
}

.k-grid-header .k-i-arrow-s::before {
  content: '\e618';
}

    See this runnable demo.