Questions on Kendo UI for Angular Forum

2 answers

17 views

Need svg icons to migrate from font icons

We have applications upgraded from Angular 15 version to 19.2.14 version and Telerik from 11 to 19.1.1 version. After upgrade, we identified that all icons are missing or not rendered properly.

While searching regarding the issue, we can across Icons not showing after update in Kendo UI for Angular | Telerik Forums. So, started migrating all font icons to svg icons.

Few icons bare available in Angular Icons SVGIcon SVGIcon List - Kendo UI for Angularand able to use it.

But few font icons are not available in svg icons as below

class="k-icon k-i-loading"
class="k-icon workIcon"
class="k-icon k-i-error"
class="k-icon k-i-dictionary-add"
class="k-icon k-i-email .k-i-envelop.k-i-letter"

class="k-icon informationIcon"
.informationIcon:before
{
content: "\e401";
}

Then please let us know what the correct approach is to upgrade these icons.

Icon

SVGIcon

answered on 04 Jul 2025

0 answers

75 views

It's not possible to change the retry svg icon in the upload component with the custom one

Hello,

I'm using the Upload component and must replace all icons with custom ones. For unknown reasons, I can replace all icons except an icon inside the retry button.
Here is a link to Stackblitz for reference: https://stackblitz.com/edit/angular-zkwyqn?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.module.ts

Could you help me with this problem, please?

SVGIcon

Upload

updated question on 09 May 2024

1 answer

164 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

288 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

163 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

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