How to set custom icon to a DrawerItem

[Tarek]

Hi

My page contains a kendo drawer. and I set a custom icon to the drwer item. I uploaded the icons on my server and pass the icon name and location at run time. The con is not shown. this is my code

 populateDrware(data: RspModules[]) {

    for (let i = 0; i < data.length; i++) {

      const item: {

        text: string;

        icon: string;

        selected: boolean;

        rspModule: RspModules;

        url: string;

      } = {

        text: '',

        icon: '',

        selected: false,

        rspModule: {},

        url: '',

      };

      item.text = data[i]?.modules?.enDesc as string;

      item.url = data[i]?.modules?.url as unknown as string;

      item.icon = "https://www.dhaman.net/wp-content/uploads/apps-icon/"+data[i]?.modules?.icon as unknown as string;

      item.selected = false;

      item.rspModule = data[i];

      this.items.push(item);

    }

 

 <kendo-drawer

    #drawer

    [items]="items"

    [mini]="true"

    [expanded]="true"

    mode="push"

    (select)="onSelect($event)"

    class="raised-panel"

    [autoCollapse]="isCollapsed"

  >

  </kendo-drawer>

[Yanmario]

Hi Tarek,

The DrawerItem icon property accepts a string of an already existing icon in the Kendo UI theme. In case the developer wants to use an icon that was uploaded then the kendoDrawerItemTemplate can be used to customize the contents of the item and add the desired icon. Example demonstrating the use of the template and uploaded image:

https://stackblitz.com/edit/angular-w8y893?file=src/app/app.component.ts

I hope this helps.

Regards,
Yanmario
Progress Telerik

[Tarek]

Thank you so much for your valuable help