Adding a Custom SVG Icon in Kendo UI for Angular

Environment

Product

Progress® Kendo UI for Angular SVGIcon

Description

How to define and add a custom SVG Icon in Kendo UI for Angular components?

Solution

To add a custom SVG icon in Kendo UI for Angular components, you can follow these steps:

1. Define the SVGIcon in a TypeScript file with the desired name, content, and viewBox properties.

custom-svg-icons.ts

typescript

export const car = {
  name: "car",
  content: "<path d='M135.2 117.4L109.1....'/>",
  viewBox: "0 0 512 512"
}

2. Import the custom SVG icon in the component file where you want to display it.

app.component.ts

typescript

import { car } from "./custom-svg-icons";
import { SVGIcon } from '@progress/kendo-svg-icons';

export class AppComponent {
  public car: SVGIcon = car; 
}

app.component.html

html

<kendo-svgicon [icon]="car"></kendo-svgicon>

The following example demonstrates the full implementation of the suggested approach.

Change Theme

Theme

Loading ...