Global SVG icon overrides not possible?

[Mauro]

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)

[Georgi]

Hi Mauro,

Thank you very much for the feedback provided.

Indeed, you are correct that starting from R2 2023 or v13.0.0 of the Kendo packages, the default icons inside the Kendo UI for Angular components have been changed to svg:

https://www.telerik.com/kendo-angular-ui/components/icons/icon-settings/

Furthermore, the font icons that were previously being used were detached from the Kendo themes with v14.0.0 introduced in the R3 2023 (October 2023) release:

With that being, the recommended approach for changing the default icons inside the Kendo components is documented in our Changing the Built-in Icons article, and more precisely, the SVG Icon section:

https://www.telerik.com/kendo-angular-ui/components/icons/icon-settings/#toc-svg-icons

The approach described in the article does indeed rely on a service that overwrites all instances of a specific icon across the application.

Having said that a possible approach for changing the icons inside the Kendo UI for Angular components would be for the developer to target the element that wraps the default icon of the specific component with some custom JavaScript code and adjust its innerHTML property:

ngAfterViewInit() {
    let icons = document.querySelectorAll(
      '.k-combobox .k-button-icon:first-child'
    );

    icons.forEach((icon) => {
      icon.innerHTML =
        '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" style="pointer-events: none;"><path d="M365.3 320h-22.7l-26.7-26.7C338.5 265.7 352 230.4 352 192c0-88.4-71.6-160-160-160S32 103.6 32 192s71.6 160 160 160c38.4 0 73.7-13.5 101.3-36.1l26.7 26.7v22.7L434.7 480l45.3-45.3zM64 192c0-70.7 57.3-128 128-128s128 57.3 128 128-57.3 128-128 128S64 262.7 64 192"></path></svg>';
    });
}

To better illustrate the suggested approach, I am sending you a StackBlitz demo that implements it:

https://stackblitz.com/edit/angular-ufx45b

In these lines of words, I would also like to mention that there is an open feature request in our Feedback Portal for the same functionality:

https://feedback.telerik.com/kendo-angular-ui/1627541-change-default-svg-icon

I upvoted it on your behalf as this would increase its popularity and will thus be considered for implementation by our development team.

I hope the provided information sheds some light on the matter. Please, let me know if I am missing out on something.

Regards,
Georgi
Progress Telerik