New to Kendo UI for Angular? Start a free 30-day trial
Override Built-in Font Icons of the Kendo Angular Components
Updated on Jan 22, 2026
Environment
| Product | Progress® Kendo UI® for Angular |
Description
How can I replace specific built-in font icons with custom font icons like Font Awesome or Material icons?
This Knowledge Base article also answers the following questions:
- How to use Font Awesome icons in Kendo UI for Angular components?
- How to replace Kendo icons with Material icons?
- How to customize the expand and collapse icons in the Grid?
- How to change the default font icons in Kendo Angular components?
Solution
To override a specific built-in font icon, target the icon CSS selector and replace its content property with your custom font icon glyph code.
css
.k-hierarchy-cell .k-i-plus::before {
content: "\\f149"; /* Glyph code */
font-family: FontAwesome;
}Using Font Awesome Icons
The following example demonstrates how to override the default expand and collapse font icons in the Master-Detail Grid with Font Awesome icons.
Change Theme
Theme
Loading ...
Using Material Icons
The following example demonstrates how to override the default expand and collapse font icons in the Master-Detail Grid with Material icons.
Change Theme
Theme
Loading ...
Steps to Override Font Icons
To override other font icons in Kendo UI components:
- Inspect the component in your browser's developer tools to identify the CSS class of the icon you want to replace (typically follows the pattern
.k-i-{icon-name}). - Create a CSS rule targeting the
::beforepseudo-element of that specific class. - Set the
contentproperty to the Unicode glyph code of your custom font icon. For detailed information about the correct escape syntax and usage, refer to Rendering Font Icons with Unicode Characters. - Set the
font-familyproperty to your custom icon font family (for example,FontAwesomeorMaterial Icons).