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

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

Hi, 

I know this is minor, but it looks like that when using trashIcon from svgIcons as icon within the button, icon is slightly displaced to the left.
Strange enough, all others are centered, only this one is moved slightly to the left.

Before calling me crazy, it wasn't just me noticing it, but also a couple of users.  :)

I simply added following into existing icon button example just to make sure it wasn't some broken css in the app:

      <div class="col-xs-12 col-sm-6 col-md-4 example-col">
        <button kendoButton [svgIcon]="svgTrash">Delete</button>
        <button kendoButton [svgIcon]="svgTrash" title="Delete"></button>
      </div>

Cheers :)

Vedad

Hi,

Is it possible to customize the black triangular "caret-down" icon used in the DropdownList and similar components (like ComboBox)?

I’d also like to know how to replace the "caret-up" and "caret-down" icons in the NumericTextBox.

Our apps use Font Awesome icons consistently, and I’m trying to replace these default icons with Font Awesome equivalents, but I haven’t been able to figure out how to do this. Could you provide guidance or examples?

I finally go t to upgrade Angular and Kendo update comes with it.
However, i see that everything is now using kendo-svgicons.

Previously, we had global overrides to default icons through CSS - as part of our themes. But i see no way to override all the icons globally by default.

Passing in some custom parameter to each component instance is not an option.
There should be an option to override every default icon globally as a part of themes for a specific component.

Like every drop down toggle arrow (but not all arrows of the same style).

Overriding in the service overrides it everywhere and thereis no component context.

With font icons and CSS i could target .k-numerictextbox  + content. The service override just overrides it for everything that used the same key.

Even worse when a single component reuses the same icon for different places (grid grouping row  vs expandable row for example)

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?