[Solved] Dialog close icon not showing when updated to v.5.0.0

[Blagovest]

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.

[Zornitsa]

Hi Blagovest,

Thank you for the details provided.

Indeed, as you have also found out, version 5.0.0 of the Kendo UI Icons package introduces breaking changes - font icon aliases were removed, icons were renamed or consolidated, and the default icon variant changed to outline. This means that any icon names that were renamed, consolidated, or had their aliases removed in v5 will no longer render as expected. In that case, those font icon usages would need to be manually updated to the new v5 icon names.

Nevertheless, for internal icons usage throughout the Kendo UI for Angular components, like the Dialog's close button missing in the title-bar (without a custom title-bar being implemented), such instances should be handled internally on our side. In this line of thought, I checked our internal logic and can confirm that the update of the font icon representation to the new icon name for the Dialog's close button has been missed, and the old name of the font icon ("close") is still utilized (as you also had noticed).

With the above being said, I want to assure you that a fix is already being worked on and is expected to be released soon. In the meantime, the developer can temporarily make the correct font icon appear by creating a custom service that extends the built-in IconSettingsService and overrides the getCustomFontIconClass function to pass the "k-i-x" icon in place of the "k-i-close" icon:

import { Injectable } from "@angular/core";
import { IconSettingsService } from "@progress/kendo-angular-icons";

@Injectable()
export class MyIconService extends IconSettingsService {
  private iconDictionary: { [key: string]: string } = {
    "close": "k-icon k-font-icon k-i-x",
  };

  public getCustomFontIconClass(iconName: string): string {
    return (
      this.iconDictionary[iconName] || super.getCustomFontIconClass(iconName)
    );
  }
}

Here is also a StackBlitz example, demonstrating the results after applying the above logic:

• https://stackblitz.com/edit/angular-l8kk81d3-gbuprjmr?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fmy-icon.service.ts

For further reference on the suggested approach, please check out the following article:

• https://www.telerik.com/kendo-angular-ui/components/icons/icon-settings#changing-the-built-in-icons 

I hope this helps. Let me know if any further assistance is needed on this matter.

Regards,
Zornitsa
Progress Telerik

[Blagovest]

Hi Zornitsa,

thank you for this answer, it helps indeed. We will use the temporary workaround and will keep in mind to remove it when the next update of the Kendo controls comes out.

Regards,

Blagovest.