Override Specific Built-in SVG Icons of the Kendo Angular Components
Environment
| Product | Progress® Kendo UI® for Angular |
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 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:
.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 with custom SVG graphics.
Steps to Override SVG Icons
To override other SVG 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-svg-i-{icon-name}.k-svg-icon). - Create a CSS rule targeting that specific class.
- Set the
contentproperty to a data URI containing your custom SVG markup:url('data:image/svg+xml; utf8, <svg>...</svg>'). - Ensure your SVG includes the
xmlnsattribute andstyle="pointer-events: none;"for proper rendering and interaction.