Since Kendo now forces the use of svgIcons how can I use my own svg file in a kendo-drawer?

[Luc]

<kendo-drawer-container>
    <kendo-drawer
      #drawer
      [items]="drawerItems"
      [mode]="'push'"
      [mini]="true"
      [expanded]="false"
      (select)="onDrawerSelect($event)"


drawerItems: DrawerRoutingItem[] = [
    {
      svgIcon: ?????????,
      text: "Chargements",
      path: "",
      selected: window.location.pathname==="/"
    },
    {
      svgIcon: ????????????,
      text: "Horaire des reprises",
      path: "horaire",
      selected: window.location.pathname==="/horaire"
    }
  ];

 

I have a chargements.svg file in an Assets directory however the svgIcons in drawerItems will only take SVGIcon object  from @progress/kendo-svg-icons

How can I use my own svg files inside the drawerItems array?

 

[Hetali]

Hello Luc,

In order to use a custom SVG Icon in the Kendo UI Drawer component, define the SVGIcon in a typescript file with name, content and viewBox. The custom SVG icon can then be imported in the component file and displayed in the Drawer. For example:

custom-svg-icons.ts:

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

app.component.ts

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

export class AppComponent {
  public car: SVGIcon = car; 

  public items: Array<DrawerItem> = [
    { text: 'Car', svgIcon: this.car }
  ];
}

Output:

Take a look at this StackBlitz example where I have added two custom SVG icons in the Kendo UI Drawer component.

Please let me know if this approach helps or if I can further assist you.

Regards,
Hetali
Progress Telerik