Adding a Custom SVG Icon in Kendo UI for Angular

Environment

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

Copy Codeexport 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

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

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

app.component.html

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

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

{% meta height:350 %} {% embed_file svg-icon-adding-custom-icon/app.component.ts preview %} {% embed_file svg-icon-adding-custom-icon/custom-svg-icons.ts %} {% embed_file svg-icon-adding-custom-icon/app.module.ts %} {% embed_file shared/main.ts hidden %} {% endmeta %}