Questions on Kendo UI for Angular Forum

1 answer

40 views

Change the icon of detail row in kendo grid

I want to change the svg-icon of expand row and change the order of that column in kendo grid

Grid

SVGIcon

answered on 01 Apr 2024

1 answer

39 views

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

<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?

SVGIcon

answered on 13 Dec 2023

0 answers

103 views

Custom SVG

Hi

I am trying to add my own SVG to be rendered but I get erros at vsCode

Can you please tell me how to add a custom SVG?

Many thanks

Please have a look:

SVGIcon

updated question on 10 Feb 2023

1 answer

716 views

How use my own svg icons for kendo Stepper

Hi,

I'm using kendo UI for angular and want to know how I can customize stepper icons with my own svg icons without adding icon library (eg: font awesome)

following is the kendo sample I'm using

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  template: `
    <kendo-stepper
      [steps]="steps"
      stepType="full"
      [(currentStep)]="current"
      [linear]="false"
      [style.width.px]="570"
    >
    </kendo-stepper>
  `,
})
export class AppComponent {
  public current = 1;

  public steps = [
    { label: "Personal Info", icon: "user" },
    { label: "Education", icon: "dictionary-add" },
    { label: "Attachments", icon: "attachment", optional: true },
    { label: "Preview", icon: "preview" },
    { label: "Submit", icon: "file-add" },
  ];
}