How use my own svg icons for kendo Stepper

[lahiru]

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" },
  ];
}

[Kaloyan]

Hi lahiru,

Thank you for the provided code snippet.

To add a custom icon to a Kendo UI for Angular Stepper component the developer can use the Stepper Indicator Template and define any custom content as well as attach SVG icons.

In more details, you can create a template with a <span> element with CSS class that is defined by the steps.icon field:

<kendo-stepper 
    [steps]="steps" 
    stepType="full" 
    [currentStep]="current" 
    [linear]="false" 
    [style.width.px]="570">

    <ng-template kendoStepperIndicatorTemplate let-step>
        <span class="{{step.icon}}"></span>
    </ng-template>
    
</kendo-stepper>

 

Then, in the component TS file, add a different string for each step.icon field. For example:

  public steps = [
    { label: "Happy", icon: "myicon1" },
    { label: "Angry", icon: "myicon2" },
    { label: "Cool", icon: "myicon3" },
    { label: "Love", icon: "myicon4" },
    { label: "Fear", icon: "myicon5" },
  ];

 

where myicon1, myicon2, and others are custom CSS classes that use the content CSS property to provide custom SVG icons, like this:

.myicon1 {
    content: url('../../assets/custom-icon-1.svg');
}

.myicon2 {
    content: url('../../assets/custom-icon-2.png');
}

. . .

 

I hope this answers your question. If this is not the case however, please let us know and I will try to assist you further.

Regards,
Kaloyan
Progress Telerik

[lahiru]

Hi Kaloyan,

This is the answer what I exactly wanted. perfect!! Thanks