Dear Telerik Team,

We recently updated our project from kendo font icons v.4.9 to v.5.0 so we had to rename some icons in our components according to this article https://www.telerik.com/design-system/docs/foundation/iconography/changelog/.

This worked as expected for icons that we explicitly set in the template, e.g. 

The problem occurs in the dialog windows, where we do not set the close-icon explicitly and just use the built-in title bar.

There shoud be an X-icon here:

When I inspect the element I see it still uses the old class "k-i-close" although it should use the new class "k-i-x":

We don't use any custom title bar for the dialog.

I don't know how to make this work without having to use some custom workarounds. What am I missing?

We are using these versions of the packages:

Thank you very much in advance.

Regards,

Blago.

Hi, 

we noticed Kendo has released a new version of the icons recently. When will those get updated in the figma ui kits?

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