[Solved] Icons not showing after update

[Dmitry]

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

[Hetali]

Hello Dmitry,

Thank you for sharing the details.

With the R3 2023 release, the Kendo UI for Angular icon type has migrated from font to svg.

The font icon is no longer delivered with the Kendo UI Themes. Following are the two ways to continue using them:

1. Using a CDN link
2. Using the precompiled CSS

In this StackBlitz example, I have used the CDN link to load the font icon. I have also attached a zip file of the Angular application where I have loaded the font icon with precompiled CSS (please run npm install followed by ng serve).

I hope this information helps. Let me know if I can further assist you.

Regards,
Hetali
Progress Telerik

[Samer]

Why do you keep doing these small breaking suprises between versions?

[Martin Bechev]

Hi Samer,

I hear your frustration regarding the unexpected breaking changes between versions, and I apologize for the disruption this has caused. I understand how these surprises can impact your workflow, especially when updates affect core features like icons.

Major releases sometimes require breaking changes to improve accessibility, modernize rendering, or unify styles across all Kendo UI for Angular components. The recent migration from font-based to SVG icons is one such example, aimed at better cross-browser compatibility and accessibility.

How We Communicate Changes

• All breaking changes, new features, and bug fixes are listed in our single changelog page.
• We also maintain a public roadmap and feedback portal to keep you informed about upcoming changes and gather your input.

How to Minimize Surprises

• Before updating, I recommend reviewing the changelog for any breaking changes.
• For critical updates like the icon migration, dedicated guides and troubleshooting tips are provided.
• You can subscribe to release notes or monitor the changelog to stay ahead of impactful updates.

Your experience and feedback are important. We continuously work to improve communication and reduce friction during updates. If you need a step-by-step guide to resolve the current icon issue or have other upgrade concerns, I’m here to help further.

Regards,

Martin