@progress/kendo-angular-icons 25.0.0-develop.2 → 25.0.0-develop.20

package/fesm2022/progress-kendo-angular-icons.mjs

@@ -3,8 +3,8 @@
 * Licensed under commercial license. See LICENSE.md in the project root for more information
 *-------------------------------------------------------------------------------------------*/
 import * as i0 from '@angular/core';
-import { Input, HostBinding, Directive, Component, isDevMode, ChangeDetectionStrategy, Injectable, InjectionToken, Optional, Inject, NgModule } from '@angular/core';
-import { isDocumentAvailable, areObjectsEqual } from '@progress/kendo-angular-common';
+import { Input, HostBinding, Directive, signal, ChangeDetectionStrategy, Component, computed, isDevMode, Injectable, InjectionToken, Optional, Inject, NgModule } from '@angular/core';
+import { isDocumentAvailable, areObjectsEqual, KENDO_COMPONENT_NAME } from '@progress/kendo-angular-common';
 import { validatePackage } from '@progress/kendo-licensing';
 import * as i1_1 from '@angular/platform-browser';
 import { Subject, BehaviorSubject, Subscription } from 'rxjs';
@@ -19,8 +19,8 @@ const packageMetadata = {
     productName: 'Kendo UI for Angular',
     productCode: 'KENDOUIANGULAR',
     productCodes: ['KENDOUIANGULAR'],
-    publishDate: 1783688442,
-    version: '25.0.0-develop.2',
+    publishDate: 1785763254,
+    version: '25.0.0-develop.20',
     licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
 };
 
@@ -91,10 +91,10 @@ class IconBaseDirective {
         this.renderer = renderer;
         validatePackage(packageMetadata);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: IconBaseDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: IconBaseDirective, isStandalone: true, selector: "[kendoIconBase]", inputs: { flip: "flip", themeColor: "themeColor", size: "size" }, host: { properties: { "class.k-flip-h": "this.horizontalFlip", "class.k-flip-v": "this.verticalFlip" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: IconBaseDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.26", type: IconBaseDirective, isStandalone: true, selector: "[kendoIconBase]", inputs: { flip: "flip", themeColor: "themeColor", size: "size" }, host: { properties: { "class.k-flip-h": "this.horizontalFlip", "class.k-flip-v": "this.verticalFlip" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: IconBaseDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: IconBaseDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kendoIconBase]'
@@ -132,34 +132,35 @@ class IconComponent extends IconBaseDirective {
      */
     set name(name) {
         if (isDocumentAvailable()) {
-            const newName = name !== this._name;
+            const newName = name !== this._name();
             if (newName) {
                 const element = this.element.nativeElement;
                 this.renderer.removeClass(element, `k-i-${this.name}`);
                 this.renderer.addClass(element, `k-i-${name}`);
             }
         }
-        this._name = name;
+        this._name.set(name);
     }
     get name() {
-        return this._name;
+        return this._name();
     }
-    _name;
+    _name = signal(undefined, ...(ngDevMode ? [{ debugName: "_name" }] : []));
     constructor(element, renderer) {
         super(element, renderer);
         this.element = element;
         this.renderer = renderer;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: IconComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: IconComponent, isStandalone: true, selector: "kendo-icon", inputs: { name: "name" }, host: { properties: { "class.k-icon": "this.hostClass", "class.k-font-icon": "this.hostClass", "attr.aria-hidden": "this.hostAriaHidden" } }, exportAs: ["kendoIcon"], usesInheritance: true, ngImport: i0, template: '', isInline: true });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: IconComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.26", type: IconComponent, isStandalone: true, selector: "kendo-icon", inputs: { name: "name" }, host: { properties: { "class.k-icon": "this.hostClass", "class.k-font-icon": "this.hostClass", "attr.aria-hidden": "this.hostAriaHidden" } }, exportAs: ["kendoIcon"], usesInheritance: true, ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: IconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: IconComponent, decorators: [{
             type: Component,
             args: [{
-                    exportAs: 'kendoIcon',
                     selector: 'kendo-icon',
+                    exportAs: 'kendoIcon',
                     template: '',
-                    standalone: true
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { hostClass: [{
                 type: HostBinding,
@@ -209,19 +210,19 @@ class SVGIconComponent extends IconBaseDirective {
     set icon(icon) {
         const element = this.element.nativeElement;
         const hasDocument = isDocumentAvailable();
-        const newName = icon?.name && icon.name !== this._icon?.name;
-        if (this._icon && this._icon.name && newName && hasDocument) {
-            this.renderer.removeClass(element, `k-svg-i-${this._icon.name}`);
+        const newName = icon?.name && icon.name !== this._icon()?.name;
+        if (this._icon()?.name && newName && hasDocument) {
+            this.renderer.removeClass(element, `k-svg-i-${this._icon().name}`);
         }
-        if (!areSame(icon, this._icon)) {
-            this._icon = icon;
+        if (!areSame(icon, this._icon())) {
+            this._icon.set(icon);
         }
         if (hasDocument && newName) {
-            this.renderer.addClass(element, `k-svg-i-${this._icon.name}`);
+            this.renderer.addClass(element, `k-svg-i-${this._icon().name}`);
         }
     }
     get icon() {
-        return this._icon;
+        return this._icon();
     }
     /**
      * Sets the style variant of the icon.
@@ -229,21 +230,30 @@ class SVGIconComponent extends IconBaseDirective {
      * > Requires `@progress/kendo-svg-icons` v5 or later for the `variants` property to be available on icons.
      */
     set variant(variant) {
-        this._variant = variant;
+        this._variant.set(variant);
     }
     get variant() {
-        return this._variant;
+        return this._variant();
     }
     get content() {
-        const variantContent = this.variant && this.icon?.variants?.[this.variant];
-        const svgContent = variantContent || this.icon.content;
-        return this.domSanitizer.bypassSecurityTrustHtml(svgContent);
+        return this._content();
     }
     get visible() {
-        return this.icon && isDocumentAvailable();
-    }
-    _icon;
-    _variant;
+        return this._visible();
+    }
+    _icon = signal(undefined, ...(ngDevMode ? [{ debugName: "_icon" }] : []));
+    _variant = signal(undefined, ...(ngDevMode ? [{ debugName: "_variant" }] : []));
+    _content = computed(() => {
+        const icon = this._icon();
+        if (!icon) {
+            return null;
+        }
+        const variant = this._variant();
+        const variantContent = variant && icon.variants?.[variant];
+        const svgContent = variantContent || icon.content;
+        return this.domSanitizer.bypassSecurityTrustHtml(svgContent);
+    }, ...(ngDevMode ? [{ debugName: "_content" }] : []));
+    _visible = computed(() => !!this._icon() && isDocumentAvailable(), ...(ngDevMode ? [{ debugName: "_visible" }] : []));
     constructor(domSanitizer, element, renderer) {
         super(element, renderer);
         this.domSanitizer = domSanitizer;
@@ -257,7 +267,7 @@ class SVGIconComponent extends IconBaseDirective {
         if (!isDevMode()) {
             return;
         }
-        if (!this._icon) {
+        if (!this._icon()) {
             throw new Error(`
                 Invalid configuration.
                 The input [icon] is required for the Kendo UI SVG Icon component for Angular.
@@ -265,15 +275,15 @@ class SVGIconComponent extends IconBaseDirective {
             `);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SVGIconComponent, deps: [{ token: i1_1.DomSanitizer }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: SVGIconComponent, isStandalone: true, selector: "kendo-svg-icon, kendo-svgicon", inputs: { icon: "icon", variant: "variant" }, host: { properties: { "class.k-svg-icon": "this.hostClass", "class.k-icon": "this.hostClass", "attr.aria-hidden": "this.hostAriaHidden" } }, exportAs: ["kendoSVGIcon"], usesInheritance: true, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SVGIconComponent, deps: [{ token: i1_1.DomSanitizer }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.26", type: SVGIconComponent, isStandalone: true, selector: "kendo-svg-icon, kendo-svgicon", inputs: { icon: "icon", variant: "variant" }, host: { properties: { "class.k-svg-icon": "this.hostClass", "class.k-icon": "this.hostClass", "attr.aria-hidden": "this.hostAriaHidden" } }, exportAs: ["kendoSVGIcon"], usesInheritance: true, ngImport: i0, template: `
         @if (visible) {
           <svg [style.pointerEvents]="'none'" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
             [attr.viewBox]="icon.viewBox" [innerHTML]="content" aria-hidden="true">
           </svg>
         }`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SVGIconComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SVGIconComponent, decorators: [{
             type: Component,
             args: [{
                     exportAs: 'kendoSVGIcon',
@@ -339,25 +349,27 @@ class IconSettingsService {
     /**
      * Returns the [`SVGIcon`](https://www.telerik.com/kendo-angular-ui/components/icons/api/svgicon) object for the provided key.
      * Override in a custom service to provide custom SVG icons.
+     * The optional `_component` parameter carries the host component identity (e.g. `'dateinput'`, `'grid'`)
+     * so subclasses can return different icons for the same name depending on the requesting component.
      *
-     * @hidden
      */
-    getSvgIcon(_name) {
+    getSvgIcon(_name, _component) {
         return null;
     }
     /**
      * Returns the list of classes to be rendered on the host `SPAN` element of custom font icons.
      * Override in a custom service to provide classes for custom font icons.
+     * The optional `_component` parameter carries the host component identity so subclasses can
+     * return different classes for the same key depending on the requesting component.
      *
-     * @hidden
      */
-    getCustomFontIconClass(_key) {
+    getCustomFontIconClass(_key, _component) {
         return null;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: IconSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: IconSettingsService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: IconSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: IconSettingsService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: IconSettingsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: IconSettingsService, decorators: [{
             type: Injectable
         }] });
 
@@ -429,25 +441,45 @@ class IconsService {
     /**
      * Returns the [`SVGIcon`](https://www.telerik.com/kendo-angular-ui/components/icons/api/svgicon) object for the provided key.
      * Override in a custom service to provide custom SVG icons.
+     * Walks the `componentChain` outermost-first so the closest explicitly configured ancestor wins,
+     * falling back to a global (no component) lookup when no level in the chain matches.
      * @hidden
      */
-    getSvgIcon(name) {
-        const customIcon = this.iconSettingsService && this.iconSettingsService.getSvgIcon(name);
-        return customIcon;
+    getSvgIcon(name, componentChain) {
+        if (!this.iconSettingsService) {
+            return null;
+        }
+        for (const component of componentChain ?? []) {
+            const scoped = this.iconSettingsService.getSvgIcon(name, component.toLowerCase());
+            if (scoped) {
+                return scoped;
+            }
+        }
+        return this.iconSettingsService.getSvgIcon(name);
     }
     /**
      * Returns the list of classes to be rendered on the host `SPAN` element of custom font icons.
      * Override in a custom service to provide classes for custom font icons.
+     * Walks the `componentChain` outermost-first so the closest explicitly configured ancestor wins,
+     * falling back to a global (no component) lookup when no level in the chain matches.
      * @hidden
      */
-    getCustomFontIconClass(key) {
-        const customClass = this.iconSettingsService && this.iconSettingsService.getCustomFontIconClass(key);
-        return customClass;
+    getCustomFontIconClass(key, componentChain) {
+        if (!this.iconSettingsService) {
+            return null;
+        }
+        for (const component of componentChain ?? []) {
+            const scoped = this.iconSettingsService.getCustomFontIconClass(key, component.toLowerCase());
+            if (scoped) {
+                return scoped;
+            }
+        }
+        return this.iconSettingsService.getCustomFontIconClass(key);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: IconsService, deps: [{ token: ICON_SETTINGS, optional: true }, { token: IconSettingsService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: IconsService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: IconsService, deps: [{ token: ICON_SETTINGS, optional: true }, { token: IconSettingsService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: IconsService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: IconsService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: IconsService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -467,36 +499,52 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
 class IconWrapperComponent {
     iconsService;
     element;
+    componentChain;
     hostClass = true;
     /**
      * Sets the name for an existing font icon in a Kendo UI theme to render.
      * Supports all [Kendo UI Icons](https://www.telerik.com/kendo-angular-ui/components/styling/icons#icons-list).
      */
-    name;
+    set name(value) { this._name.set(value); }
+    get name() { return this._name(); }
     /**
      * Sets the [SVGIcon](https://www.telerik.com/kendo-angular-ui/components/icons/api/svgicon) to render.
      */
-    svgIcon;
+    set svgIcon(value) { this._svgIcon.set(value); }
+    get svgIcon() { return this._svgIcon(); }
     /**
      * Sets an additional class on the internal Icon component.
      */
-    innerCssClass = '';
+    set innerCssClass(value) { this._innerCssClass.set(value); }
+    get innerCssClass() { return this._innerCssClass(); }
     /**
      * Sets a custom font icon class using the API of the consuming component.
      */
-    customFontClass = '';
+    set customFontClass(value) { this._customFontClass.set(value); }
+    get customFontClass() { return this._customFontClass(); }
     /**
      * Sets the `IconSize` for the icon.
      */
-    size;
+    set size(value) { this._size.set(value); }
+    get size() { return this._size(); }
     get customClasses() {
         const classes = [this.customFontClass, this.innerCssClass, this.customFontIconClass].filter(cl => !!cl).join(' ');
         return classes;
     }
-    iconSettings;
+    _name = signal(undefined, ...(ngDevMode ? [{ debugName: "_name" }] : []));
+    _svgIcon = signal(undefined, ...(ngDevMode ? [{ debugName: "_svgIcon" }] : []));
+    _innerCssClass = signal('', ...(ngDevMode ? [{ debugName: "_innerCssClass" }] : []));
+    _customFontClass = signal('', ...(ngDevMode ? [{ debugName: "_customFontClass" }] : []));
+    _size = signal(undefined, ...(ngDevMode ? [{ debugName: "_size" }] : []));
+    // iconSettings is set from a subscription — must be a signal so changes trigger CD in zoneless apps
+    _iconSettings = signal(undefined, ...(ngDevMode ? [{ debugName: "_iconSettings" }] : []));
+    get iconSettings() { return this._iconSettings(); }
+    // Resolves the effective SVG icon: prefer service-provided icon, then fall back to the svgIcon input.
+    // Extracted from hasSvgIcon getter to avoid writing to a signal inside a reactive context.
+    _resolvedSvgIcon = computed(() => this.iconsService.getSvgIcon(this._name(), this.componentChain) || this._svgIcon(), ...(ngDevMode ? [{ debugName: "_resolvedSvgIcon" }] : []));
+    get resolvedSvgIcon() { return this._resolvedSvgIcon(); }
     get hasSvgIcon() {
-        this.svgIcon = this.iconsService.getSvgIcon(this.name) || this.svgIcon;
-        if (this.svgIcon) {
+        if (this._resolvedSvgIcon()) {
             return true;
         }
         if (isDevMode()) {
@@ -520,27 +568,29 @@ https://www.telerik.com/design-system/docs/foundation/iconography/icon-list/
         return false;
     }
     get customFontIconClass() {
-        return this.iconsService.getCustomFontIconClass(this.name) || this.customFontClass;
+        return this.iconsService.getCustomFontIconClass(this.name, this.componentChain) || this.customFontClass;
     }
     subs = new Subscription();
-    constructor(iconsService, element) {
+    constructor(iconsService, element, componentChain) {
         this.iconsService = iconsService;
         this.element = element;
+        this.componentChain = componentChain;
         this.subs = iconsService.changes.subscribe(iconSettings => {
-            this.iconSettings = iconSettings;
+            this._iconSettings.set(iconSettings);
         });
     }
     ngOnDestroy() {
         this.subs.unsubscribe();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: IconWrapperComponent, deps: [{ token: IconsService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: IconWrapperComponent, isStandalone: true, selector: "kendo-icon-wrapper", inputs: { name: "name", svgIcon: "svgIcon", innerCssClass: "innerCssClass", customFontClass: "customFontClass", size: "size" }, host: { properties: { "class.k-icon-wrapper-host": "this.hostClass" } }, exportAs: ["kendoIconWrapper"], ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: IconWrapperComponent, deps: [{ token: IconsService }, { token: i0.ElementRef }, { token: KENDO_COMPONENT_NAME, optional: true }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.26", type: IconWrapperComponent, isStandalone: true, selector: "kendo-icon-wrapper", inputs: { name: "name", svgIcon: "svgIcon", innerCssClass: "innerCssClass", customFontClass: "customFontClass", size: "size" }, host: { properties: { "class.k-icon-wrapper-host": "this.hostClass" } }, exportAs: ["kendoIconWrapper"], ngImport: i0, template: `
         @if (iconSettings?.type === 'svg' && hasSvgIcon) {
           <kendo-svgicon
             [ngClass]="innerCssClass"
-            [icon]="svgIcon"
+            [icon]="resolvedSvgIcon"
             [size]="size || iconSettings?.size"
             [themeColor]="iconSettings?.themeColor"
+            [variant]="iconSettings?.variant"
           [flip]="iconSettings?.flip"></kendo-svgicon>
         } @else {
           @if (!customFontIconClass) {
@@ -554,20 +604,21 @@ https://www.telerik.com/design-system/docs/foundation/iconography/icon-list/
             <span [ngClass]="customClasses"></span>
           }
         }
-        `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "kendo-icon", inputs: ["name"], exportAs: ["kendoIcon"] }, { kind: "component", type: SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon", "variant"], exportAs: ["kendoSVGIcon"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "kendo-icon", inputs: ["name"], exportAs: ["kendoIcon"] }, { kind: "component", type: SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon", "variant"], exportAs: ["kendoSVGIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: IconWrapperComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: IconWrapperComponent, decorators: [{
             type: Component,
             args: [{
-                    exportAs: 'kendoIconWrapper',
                     selector: 'kendo-icon-wrapper',
+                    exportAs: 'kendoIconWrapper',
                     template: `
         @if (iconSettings?.type === 'svg' && hasSvgIcon) {
           <kendo-svgicon
             [ngClass]="innerCssClass"
-            [icon]="svgIcon"
+            [icon]="resolvedSvgIcon"
             [size]="size || iconSettings?.size"
             [themeColor]="iconSettings?.themeColor"
+            [variant]="iconSettings?.variant"
           [flip]="iconSettings?.flip"></kendo-svgicon>
         } @else {
           @if (!customFontIconClass) {
@@ -583,9 +634,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
         }
         `,
                     standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [NgClass, IconComponent, SVGIconComponent]
                 }]
-        }], ctorParameters: () => [{ type: IconsService }, { type: i0.ElementRef }], propDecorators: { hostClass: [{
+        }], ctorParameters: () => [{ type: IconsService }, { type: i0.ElementRef }, { type: undefined, decorators: [{
+                    type: Optional
+                }, {
+                    type: Inject,
+                    args: [KENDO_COMPONENT_NAME]
+                }] }], propDecorators: { hostClass: [{
                 type: HostBinding,
                 args: ['class.k-icon-wrapper-host']
             }], name: [{
@@ -620,11 +677,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * ```
  */
 class IconModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: IconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: IconModule, imports: [IconComponent], exports: [IconComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: IconModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: IconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.26", ngImport: i0, type: IconModule, imports: [IconComponent], exports: [IconComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: IconModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: IconModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: IconModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [IconComponent],
@@ -652,11 +709,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
  * ```
  */
 class SVGIconModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SVGIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: SVGIconModule, imports: [SVGIconComponent], exports: [SVGIconComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SVGIconModule });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SVGIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.26", ngImport: i0, type: SVGIconModule, imports: [SVGIconComponent], exports: [SVGIconComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SVGIconModule });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: SVGIconModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: SVGIconModule, decorators: [{
             type: NgModule,
             args: [{
                     exports: [SVGIconComponent],
@@ -746,11 +803,11 @@ const KENDO_ICONS = [
  * ```
  */
 class IconsModule {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: IconsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: IconsModule, imports: [IconComponent, SVGIconComponent], exports: [IconComponent, SVGIconComponent] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: IconsModule, providers: [IconsService] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: IconsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.26", ngImport: i0, type: IconsModule, imports: [IconComponent, SVGIconComponent], exports: [IconComponent, SVGIconComponent] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: IconsModule, providers: [IconsService] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: IconsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.26", ngImport: i0, type: IconsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [

package/index.d.ts

@@ -158,6 +158,8 @@ declare class SVGIconComponent extends IconBaseDirective implements OnInit {
     get visible(): boolean;
     private _icon;
     private _variant;
+    private readonly _content;
+    private readonly _visible;
     constructor(domSanitizer: DomSanitizer, element: ElementRef, renderer: Renderer2);
     ngOnInit(): void;
     private verifyIconProperty;
@@ -181,7 +183,8 @@ type IconType = 'font' | 'svg';
  *   type: 'svg',
  *   themeColor: 'primary',
  *   size: 'large',
- *   flip: 'horizontal'
+ *   flip: 'horizontal',
+ *   variant: 'outline'
  * };
  * ```
  */
@@ -202,6 +205,11 @@ interface IconSettings {
      * Sets the `flip` direction of the icon.
      */
     flip?: IconFlip;
+    /**
+     * Sets the `variant` of the SVG icon.
+     * Requires `@progress/kendo-svg-icons` version `5.0.0` or later.
+     */
+    variant?: IconVariant;
 }
 
 /**
@@ -233,17 +241,19 @@ declare class IconSettingsService {
     /**
      * Returns the [`SVGIcon`](https://www.telerik.com/kendo-angular-ui/components/icons/api/svgicon) object for the provided key.
      * Override in a custom service to provide custom SVG icons.
+     * The optional `_component` parameter carries the host component identity (e.g. `'dateinput'`, `'grid'`)
+     * so subclasses can return different icons for the same name depending on the requesting component.
      *
-     * @hidden
      */
-    getSvgIcon(_name: string): SVGIcon;
+    getSvgIcon(_name: string, _component?: string): SVGIcon;
     /**
      * Returns the list of classes to be rendered on the host `SPAN` element of custom font icons.
      * Override in a custom service to provide classes for custom font icons.
+     * The optional `_component` parameter carries the host component identity so subclasses can
+     * return different classes for the same key depending on the requesting component.
      *
-     * @hidden
      */
-    getCustomFontIconClass(_key: string): string;
+    getCustomFontIconClass(_key: string, _component?: string): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<IconSettingsService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<IconSettingsService>;
 }
@@ -284,15 +294,19 @@ declare class IconsService implements OnDestroy {
     /**
      * Returns the [`SVGIcon`](https://www.telerik.com/kendo-angular-ui/components/icons/api/svgicon) object for the provided key.
      * Override in a custom service to provide custom SVG icons.
+     * Walks the `componentChain` outermost-first so the closest explicitly configured ancestor wins,
+     * falling back to a global (no component) lookup when no level in the chain matches.
      * @hidden
      */
-    getSvgIcon(name: string): SVGIcon;
+    getSvgIcon(name: string, componentChain?: string[]): SVGIcon;
     /**
      * Returns the list of classes to be rendered on the host `SPAN` element of custom font icons.
      * Override in a custom service to provide classes for custom font icons.
+     * Walks the `componentChain` outermost-first so the closest explicitly configured ancestor wins,
+     * falling back to a global (no component) lookup when no level in the chain matches.
      * @hidden
      */
-    getCustomFontIconClass(key: string): string;
+    getCustomFontIconClass(key: string, componentChain?: string[]): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<IconsService, [{ optional: true; }, { optional: true; }]>;
     static ɵprov: i0.ɵɵInjectableDeclaration<IconsService>;
 }
@@ -303,36 +317,50 @@ declare class IconsService implements OnDestroy {
 declare class IconWrapperComponent implements OnDestroy {
     private iconsService;
     element: ElementRef;
+    private componentChain;
     hostClass: boolean;
     /**
      * Sets the name for an existing font icon in a Kendo UI theme to render.
      * Supports all [Kendo UI Icons](https://www.telerik.com/kendo-angular-ui/components/styling/icons#icons-list).
      */
-    name: string;
+    set name(value: string);
+    get name(): string;
     /**
      * Sets the [SVGIcon](https://www.telerik.com/kendo-angular-ui/components/icons/api/svgicon) to render.
      */
-    svgIcon: SVGIcon;
+    set svgIcon(value: SVGIcon);
+    get svgIcon(): SVGIcon;
     /**
      * Sets an additional class on the internal Icon component.
      */
-    innerCssClass: string;
+    set innerCssClass(value: string);
+    get innerCssClass(): string;
     /**
      * Sets a custom font icon class using the API of the consuming component.
      */
-    customFontClass: string;
+    set customFontClass(value: string);
+    get customFontClass(): string;
     /**
      * Sets the `IconSize` for the icon.
      */
-    size: IconSize;
+    set size(value: IconSize);
+    get size(): IconSize;
     get customClasses(): string;
-    iconSettings: IconSettings;
+    private _name;
+    private _svgIcon;
+    private _innerCssClass;
+    private _customFontClass;
+    private _size;
+    private _iconSettings;
+    get iconSettings(): IconSettings;
+    private readonly _resolvedSvgIcon;
+    get resolvedSvgIcon(): SVGIcon;
     get hasSvgIcon(): boolean;
     get customFontIconClass(): string;
     private subs;
-    constructor(iconsService: IconsService, element: ElementRef);
+    constructor(iconsService: IconsService, element: ElementRef, componentChain: string[]);
     ngOnDestroy(): void;
-    static ɵfac: i0.ɵɵFactoryDeclaration<IconWrapperComponent, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<IconWrapperComponent, [null, null, { optional: true; }]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<IconWrapperComponent, "kendo-icon-wrapper", ["kendoIconWrapper"], { "name": { "alias": "name"; "required": false; }; "svgIcon": { "alias": "svgIcon"; "required": false; }; "innerCssClass": { "alias": "innerCssClass"; "required": false; }; "customFontClass": { "alias": "customFontClass"; "required": false; }; "size": { "alias": "size"; "required": false; }; }, {}, never, never, true, never>;
 }
 

package/package-metadata.mjs

@@ -7,7 +7,7 @@ export const packageMetadata = {
   "productCodes": [
     "KENDOUIANGULAR"
   ],
-  "publishDate": 1783688442,
-  "version": "25.0.0-develop.2",
+  "publishDate": 1785763254,
+  "version": "25.0.0-develop.20",
   "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-angular-icons",
-  "version": "25.0.0-develop.2",
+  "version": "25.0.0-develop.20",
   "description": "Kendo UI Angular component starter template",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "Progress",
@@ -31,7 +31,7 @@
     "package": {
       "productName": "Kendo UI for Angular",
       "productCode": "KENDOUIANGULAR",
-      "publishDate": 1783688442,
+      "publishDate": 1785763254,
       "licensingDocsUrl": "https://www.telerik.com/kendo-angular-ui/my-license/"
     }
   },
@@ -42,7 +42,7 @@
     "@angular/platform-browser": "20 - 22",
     "@progress/kendo-licensing": "^1.11.0",
     "@progress/kendo-svg-icons": "^4.9.0 || ^5.0.0",
-    "@progress/kendo-angular-common": "25.0.0-develop.2",
+    "@progress/kendo-angular-common": "25.0.0-develop.20",
     "rxjs": "^6.5.3 || ^7.0.0"
   },
   "peerDependenciesMeta": {
@@ -52,7 +52,7 @@
   },
   "dependencies": {
     "tslib": "^2.3.1",
-    "@progress/kendo-angular-schematics": "25.0.0-develop.2"
+    "@progress/kendo-angular-schematics": "25.0.0-develop.20"
   },
   "schematics": "./schematics/collection.json",
   "module": "fesm2022/progress-kendo-angular-icons.mjs",