Hello!

We got the issue that icons are not displayed correctly inside our kendo ui components.

We followed the styling tutorial Styling & Themes - Overview - Kendo UI for Angular (telerik.com) and Overview - Icon - Kendo UI for Angular (telerik.com).

We are using Kendo 11.3, kendo-theme-bootstrap 7.0.2 (also installed default theme), kendo-font-icons ^2.0.0

We also imported inside styles.scss:

@import '@progress/kendo-theme-bootstrap/scss/icons/_index.scss';
...
// kendo-angular-dropdowns
@import '@progress/kendo-theme-bootstrap/scss/autocomplete/_index.scss';
@import '@progress/kendo-theme-bootstrap/scss/combobox/_index.scss';
@import '@progress/kendo-theme-bootstrap/scss/dropdownlist/_index.scss';
@import '@progress/kendo-theme-bootstrap/scss/dropdowntree/_index.scss';
@import '@progress/kendo-theme-bootstrap/scss/multiselect/_index.scss';
...
@import '@progress/kendo-font-icons/dist/index.css';

The result of a dropdown box is in the image, it shows the wrong icon for the arrow down symbol.
Has anyone had this issue before and can somebody help please?

Thank you for your time

I updated Angular Kendo packages to version 14.

After this, the icons are not shown, although the svg icons are displayed. What could be the problem? Before this everything worked. Maybe something with the font?

Styles .k-i-... are missing in the "Elements" tab of the browser.

<button (click)="refresh()">
  <kendo-icon name="refresh"/>
</button>

package.json
"dependencies": {
    "@angular/animations": "^16.2.8",
    "@angular/common": "^16.2.8",
    "@angular/compiler": "^16.2.8",
    "@angular/core": "^16.2.8",
    "@angular/forms": "^16.2.8",
    "@angular/platform-browser": "^16.2.8",
    "@angular/platform-browser-dynamic": "^16.2.8",
    "@angular/router": "^16.2.8",
    "@apollo/client": "^3.8.5",
    "@auth0/angular-jwt": "^5.1.2",
    "@ngrx/effects": "^16.3.0",
    "@ngrx/eslint-plugin": "^16.3.0",
    "@ngrx/store": "^16.3.0",
    "@ngx-translate/core": "^15.0.0",
    "@ngx-translate/http-loader": "^8.0.0",
    "@progress/kendo-angular-buttons": "^14.0.0",
    "@progress/kendo-angular-dateinputs": "^14.0.0",
    "@progress/kendo-angular-dialog": "^14.0.0",
    "@progress/kendo-angular-dropdowns": "^14.0.0",
    "@progress/kendo-angular-grid": "^14.0.0",
    "@progress/kendo-angular-icons": "^14.0.0",
    "@progress/kendo-angular-indicators": "^14.0.0",
    "@progress/kendo-angular-inputs": "^14.0.0",
    "@progress/kendo-angular-layout": "^14.0.0",
    "@progress/kendo-angular-menu": "^14.0.0",
    "@progress/kendo-angular-navigation": "^14.0.0",
    "@progress/kendo-angular-notification": "^14.0.0",
    "@progress/kendo-angular-treeview": "^14.0.0",
    "@progress/kendo-data-query": "^1.7.0",
    "@progress/kendo-theme-fluent": "^7.0.1",

angular.json
"styles": [
  {
    "input": "node_modules/@progress/kendo-theme-fluent/dist/all.css"
  },
  "src/styles.less",
  "src/kendo.less",
  "src/assets/fonts/OpenSans/open-sans.css",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
],

My UI designer said he could not find the "eye" icon for show/hide of passwords.  Yet when I was entering my password when signing up, there was one.  Can you please point me to this icon in your library?  Thank you

JD Krise

When implementing the ContextMenu the items do not contain the required icons.

I used the object notation from the example

{text: string, icon: string}

I tried to hard code the value in the html template

<kendo-contextmenu [target]="target">
      <kendo-menu-item text="My Web Site" icon="trash">
                    <kendo-menu-item text="images" icon="folder">

and I tried using a template and assigning the icons via [ngClass].

Nothing works.

I get an icon but it's always a downward chevron.

Any idea what might be causing this issue?
Could the icon font be overwritten?

When I run install on package.json, I get this:

@progress/kendo-angular-icons@2.0.1 requires a peer of @progress/kendo-svg-icons@^0.1.2 but none is installed.

I have "@progress/kendo-svg-icons": "~0.6.0", which is the latest version.

Hello,

I have a problem with Kendo icons (k-icon k-i-menu etc.) which are now not showing after the latest update of Kendo and Angular to Angular 14.

This is what is showing (just rectangles) and it was working fine until now. I have not changed anything in the app related to fonts or icons so I don't really know where to search for the problem. I've tried rollback of the Kendo theme to the last version I had before the issue, but it didn't work. I have the issue in 3 different browsers.

This is the code i have in my angular.json loading kendo-theme-material v5.8.1

"styles": [{
                                "input": "node_modules/@progress/kendo-theme-material/dist/all.css",
                                "inject": true
                            },
                            "./node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
                            "./node_modules/bootstrap/dist/css/bootstrap.css",
                            "./node_modules/ngx-toastr/toastr.css"
                        ],

and the icons in my html are with class k-icon in combination with k-i-menu or other icons, which up until now have worked perfectly fine.

Can you help me solve the problem or at least give me some guidelines to what might be causing it?

Thanks

Hi,  I'd like to add an icon to all the headers of my grid. This icon must be placed just next to the filter icon (on the right of the filter button):

I was trying this using the header template but only can modify the left of the filter (the title area).

I'll appreciate any help with this.

Thanks in advance

Hi,

I am trying to update my angular kendo ui components to the latest version, but it fails on npm install (tried also removing and re-adding).

Error is as following:

Any help would be welcome :)

Thank you

Vedad

When I would like to use icon in button like this:

<button kendoButton icon="gear" class="k-button" [disabled]="someMethod()"></button>

everything is ok. I see gear icon into a button.

If I would like to use directive kendoGridAddCommand like below:

<button kendoButton icon="gear" class="k-button" kendoGridAddCommand [disabled]="someMethod()"></button>

I see two icons into the button. What is going on? I cannot understand what's adding second icon.

Without directive:

With:

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)

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