# Override Built-in Font Icons of the Kendo Angular Components

## Environment

<table>
    <tbody>
	    <tr>
	    	<td>Product</td>
	    	<td>Progress® Kendo UI® for Angular</td>
	    </tr>
    </tbody>
</table>

## Description

How can I replace specific built-in font icons with custom font icons like [Font Awesome](http://fontawesome.io/) or [Material icons](https://fonts.google.com/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](https://www.telerik.com/kendo-angular-ui/components/grid/master-detail) with Font Awesome icons.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/knowledge-base/using-third-party-font-icons/implement-fontawesome-instead-of-kendo-icons/source.txt)

### Using Material Icons

The following example demonstrates how to override the default expand and collapse font icons in the [Master-Detail Grid](https://www.telerik.com/kendo-angular-ui/components/grid/master-detail) with Material icons.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/knowledge-base/using-third-party-font-icons/implement-material-instead-of-kendo-icons/source.txt)

## Steps to Override Font Icons

To override other font icons in Kendo UI components:

1. 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}`).
2. Create a CSS rule targeting the `::before` pseudo-element of that specific class.
3. Set the `content` property 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](https://www.telerik.com/kendo-angular-ui/components/styling/icons#rendering-font-icons-with-unicode-characters).
4. Set the `font-family` property to your custom icon font family (for example, `FontAwesome` or `Material Icons`).

## See Also

* [Override Built-in SVG Icons of the Kendo Angular Components](https://www.telerik.com/kendo-angular-ui/components/knowledge-base/override-svg-icons)
* [Font Icon to SVG Icon Migration](https://www.telerik.com/kendo-angular-ui/components/styling/migrating-font-svg)
* [Kendo UI for Angular Icons Documentation](https://www.telerik.com/kendo-angular-ui/components/icons)