# Override Specific Built-in SVG 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 SVG icon with custom SVG graphics?

This Knowledge Base article also answers the following questions:

* How to replace SVG icons with custom ones?
* How to customize the expand and collapse icons in the Grid?
* How to change the default SVG icons in Kendo Angular components?

## Solution

Use this approach when you need to override individual icons in specific contexts, such as replacing only the expand/collapse icons in a Grid hierarchy while keeping other icons unchanged. For globally replacing all instances of an icon type across your application, use the built-in [Icon Customization](https://www.telerik.com/kendo-angular-ui/components/icons/overwriting-default-icons#override-icons-per-application) approach instead.

To override a specific built-in SVG icon, target the icon's CSS selectors and replace its `content` property with your custom SVG URI. For example, to override the expand icon in the Master-Detail Grid, you can use the following CSS:

```css
.k-master-row .k-hierarchy-cell .k-svg-i-plus.k-svg-icon {
    content: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" style="pointer-events: none;"><path d="m158.059 129.941 126.06 126.06-126.06 126.061L192 416l160-159.999L192 96z"></path></svg>');
}
```

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

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

## Steps to Override SVG Icons

To override other SVG 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-svg-i-{icon-name}.k-svg-icon`).
2. Create a CSS rule targeting that specific class.
3. Set the `content` property to a data URI containing your custom SVG markup: `url('data:image/svg+xml; utf8, <svg>...</svg>')`.
4. Ensure your SVG includes the `xmlns` attribute and `style="pointer-events: none;"` for proper rendering and interaction.

## See Also

* [Override Built-in Font Icons of the Kendo Angular Components](https://www.telerik.com/kendo-angular-ui/components/knowledge-base/override-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)