@siemens/element-ng 48.0.0-next.2 → 48.0.0-next.3

package/fesm2022/siemens-element-ng-icon.mjs

@@ -1,40 +1,168 @@
 import * as i0 from '@angular/core';
-import { input, computed, ChangeDetectionStrategy, Component, NgModule, inject, DestroyRef, Injectable, InjectionToken } from '@angular/core';
+import { inject, DestroyRef, Injectable, InjectionToken, input, computed, ChangeDetectionStrategy, Component, NgModule } from '@angular/core';
 import { NgClass } from '@angular/common';
-import { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate';
 import { DomSanitizer } from '@angular/platform-browser';
 import { SiThemeService } from '@siemens/element-ng/theme';
+import { t, SiTranslatePipe } from '@siemens/element-translate-ng/translate';
 
 /**
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
+const parseDataSvgIcon = (icon, domSanitizer) => {
+    const parsed = /^data:image\/svg\+xml;utf8,(.*)$/.exec(icon);
+    if (!parsed) {
+        console.error('Failed to parse icon', icon);
+        return '';
+    }
+    return domSanitizer.bypassSecurityTrustHtml(parsed[1]);
+};
+const registeredIcons = new Map();
+/**
+ * Adds the provided icons.
+ * It requires an Angular InjectionContent.
+ * The Icons are available until the component is destroyed.
+ * Call this function only in the component which actually uses the icon.
+ * Importing all icons on the global level is discouraged.
+ *
+ * When using a string instead of the object to use an icon,
+ * use the kebab-case version of the icon name.
+ *
+ * @example
+ * ```ts
+ * import { elementIcon } from '@simpl/element-icons/ionic';
+ * import { addIcons } from '@siemens/element-ng/icon'
+ *
+ * @Component({`<si-icon [icon]="icons.elementIcon"`})
+ * class MyComponent {
+ *   icons = addIcons({ elementIcon })
+ * }
+ * ```
+ */
+const addIcons = (icons) => {
+    const iconMap = {};
+    const domSanitizer = inject(DomSanitizer);
+    for (const [key, rawContent] of Object.entries(icons)) {
+        const registeredIcon = registeredIcons.get(key) ?? {
+            content: parseDataSvgIcon(rawContent, domSanitizer),
+            referenceCount: 0
+        };
+        registeredIcon.referenceCount++;
+        registeredIcons.set(key, registeredIcon);
+        iconMap[key] = key;
+    }
+    // Delete registered Icons after Component is destroyed to optimize memory usage.
+    // WeakMap must not be used, as the Icon can only be removed on component destruction.
+    // When using a WeakMap it would also get destroyed if it is not referenced, but the component may use it later again.
+    inject(DestroyRef).onDestroy(() => {
+        for (const key of Object.keys(icons)) {
+            const registeredIcon = registeredIcons.get(key);
+            if (registeredIcon.referenceCount === 1) {
+                registeredIcons.delete(key);
+            }
+            else {
+                registeredIcon.referenceCount--;
+            }
+        }
+    });
+    return iconMap;
+};
+const getIcon = (key) => registeredIcons.get(key)?.content;
+class IconService {
+    themeService = inject(SiThemeService);
+    getIcon(name) {
+        const camelCaseName = this.kebabToCamelCase(name);
+        return this.themeService.themeIcons()[camelCaseName] ?? getIcon(camelCaseName);
+    }
+    kebabToCamelCase(str) {
+        return str.replace(/-./g, match => match.charAt(1).toUpperCase());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: IconService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: IconService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: IconService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
+/**
+ * Copyright (c) Siemens 2016 - 2025
+ * SPDX-License-Identifier: MIT
+ */
+const ICON_CONFIG = new InjectionToken('ICON_CONFIG', {
+    providedIn: 'root',
+    factory: () => ({ disableSvgIcons: true })
+});
+/**
+ * Configure how Element handles icons. Provide only once in your global configuration.
+ *
+ * @experimental
+ */
+const provideIconConfig = (config) => ({
+    provide: ICON_CONFIG,
+    useValue: config
+});
+/**
+ * Component to render a font or SVG icon depending on the configuration.
+ * If no SVG icon is found, the component will fall back to render the icon-font.
+ * In that case, an application must ensure that the icon font is loaded.
+ * This component will only attach the respective class.
+ *
+ * The content of this component is hidden in the a11y tree.
+ * If needed, the consumer must set proper labels.
+ *
+ * @experimental
+ */
 class SiIconComponent {
-    /** Icon token, see {@link https://element.siemens.io/icons/element} */
-    icon = input();
-    /** Color class, see {@link https://element.siemens.io/fundamentals/typography/#color-variants-classes} */
-    color = input();
-    /** Icon token, see {@link https://element.siemens.io/fundamentals/icons/} */
-    stackedIcon = input();
-    /** Color class, see {@link https://element.siemens.io/fundamentals/icons/} */
-    stackedColor = input();
-    /** Alternative name or translation key for icon. Used for A11y. */
-    alt = input();
     /**
-     * Text-size class for icon size, see {@link https://element.siemens.io/fundamentals/typography/#type-styles-classes}
+     * Define which icon should be rendered.
+     * Provide using:
+     * - value of the icon map provided by `addIcons`
+     * - (not recommended): plain string in kebab-case or camelCase
      *
-     * @defaultValue 'icon'
+     * @example
+     * ```ts
+     * import { elementUser } from '@simpl/element-icons/ionic';
+     *
+     * @Component({template: `
+     *   <si-icon [icon]="icons.elementUser" />
+     *   <si-icon icon="element-user" />
+     *   <si-icon icon="elementUser" />
+     *
+     * `})
+     * class MyComponent {
+     *   icons = addIcons(elementUser);
+     * }
+     * ```
      */
-    size = input('icon');
-    altText = computed(() => {
-        return this.alt() ?? this.icon()?.replace('element-', '').split('-').join(' ') ?? '';
-    });
+    icon = input.required();
+    config = inject(ICON_CONFIG);
+    iconService = inject(IconService);
+    svgIcon = computed(() => this.config.disableSvgIcons ? undefined : this.iconService.getIcon(this.icon()));
+    /** Icon class, which is ensured to be kebab-case. */
+    fontIcon = computed(() => this.svgIcon() ? undefined : this.camelToKebabCase(this.icon()));
+    camelToKebabCase(str) {
+        return str
+            .replace(/([a-z])([A-Z0-9])/g, '$1-$2')
+            .replace(/([0-9])([A-Z])/g, '$1-$2')
+            .toLowerCase();
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiIconComponent, isStandalone: true, selector: "si-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, stackedIcon: { classPropertyName: "stackedIcon", publicName: "stackedIcon", isSignal: true, isRequired: false, transformFunction: null }, stackedColor: { classPropertyName: "stackedColor", publicName: "stackedColor", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span\n  class=\"d-inline-block position-relative\"\n  [attr.aria-label]=\"altText() ? (altText() | translate) : null\"\n  [attr.aria-hidden]=\"!altText()\"\n  [attr.role]=\"altText() ? 'img' : 'presentation'\"\n  [ngClass]=\"[icon() ?? '', color() ?? '', size()]\"\n>\n  @if (stackedIcon()) {\n    <i\n      class=\"position-absolute start-0\"\n      aria-hidden=\"true\"\n      [ngClass]=\"[stackedIcon(), stackedColor() ?? '']\"\n    ></i>\n  }\n</span>\n", styles: [":host,span{line-height:1}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: SiIconComponent, isStandalone: true, selector: "si-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.data-icon": "icon()" } }, ngImport: i0, template: ` <div
+    aria-hidden="true"
+    [ngClass]="svgIcon() ? '' : fontIcon()"
+    [innerHTML]="svgIcon()"
+  ></div>`, isInline: true, styles: [":host{display:inline-flex;font-weight:400;vertical-align:middle;line-height:1}:host ::ng-deep svg{display:block;block-size:1em;fill:currentColor}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiIconComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-icon', imports: [NgClass, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  class=\"d-inline-block position-relative\"\n  [attr.aria-label]=\"altText() ? (altText() | translate) : null\"\n  [attr.aria-hidden]=\"!altText()\"\n  [attr.role]=\"altText() ? 'img' : 'presentation'\"\n  [ngClass]=\"[icon() ?? '', color() ?? '', size()]\"\n>\n  @if (stackedIcon()) {\n    <i\n      class=\"position-absolute start-0\"\n      aria-hidden=\"true\"\n      [ngClass]=\"[stackedIcon(), stackedColor() ?? '']\"\n    ></i>\n  }\n</span>\n", styles: [":host,span{line-height:1}\n"] }]
+            args: [{ selector: 'si-icon', imports: [NgClass], template: ` <div
+    aria-hidden="true"
+    [ngClass]="svgIcon() ? '' : fontIcon()"
+    [innerHTML]="svgIcon()"
+  ></div>`, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[attr.data-icon]': 'icon()'
+                    }, styles: [":host{display:inline-flex;font-weight:400;vertical-align:middle;line-height:1}:host ::ng-deep svg{display:block;block-size:1em;fill:currentColor}\n"] }]
         }] });
 
 /**
@@ -115,86 +243,6 @@ const elementAlarmTick = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/
 const elementUser = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M256 252a76 76 0 1 0-76-76 76.08 76.08 0 0 0 76 76Zm0-128a52 52 0 1 1-52 52 52.06 52.06 0 0 1 52-52ZM124 360.14a12 12 0 0 0 6.71-2.06c.61-.41 61.54-41.08 126.14-41.08 75.3 0 122.86 39.84 123.3 40.23a12 12 0 0 0 15.68-18.18c-2.19-1.88-54.39-46.05-139-46.05C185 293 120 336.35 117.28 338.19a12 12 0 0 0 6.72 21.95Z'/></svg>";
 const elementHelp = "data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'><path d='M256 64C150.13 64 64 150.13 64 256s86.13 192 192 192 192-86.13 192-192S361.87 64 256 64Zm0 360c-92.64 0-168-75.36-168-168S163.36 88 256 88s168 75.36 168 168-75.36 168-168 168Z'/><path d='M256 305a12 12 0 0 1-12-12v-29.22a12 12 0 0 1 6.51-10.67 11.63 11.63 0 0 1 1.67-.71c1.14-.4 38.54-14.05 38.54-36.4a36 36 0 0 0-70-12 12 12 0 1 1-22.64-8 60 60 0 0 1 116.6 20c0 31-31.39 48.92-46.72 55.84V293A12 12 0 0 1 256 305ZM256.11 360h-.22a16 16 0 0 1 0-32h.22a16 16 0 0 1 0 32Z'/></svg>";
 
-/**
- * Copyright (c) Siemens 2016 - 2025
- * SPDX-License-Identifier: MIT
- */
-const parseDataSvgIcon = (icon, domSanitizer) => {
-    const parsed = /^data:image\/svg\+xml;utf8,(.*)$/.exec(icon);
-    if (!parsed) {
-        console.error('Failed to parse icon', icon);
-        return '';
-    }
-    return domSanitizer.bypassSecurityTrustHtml(parsed[1]);
-};
-const registeredIcons = new Map();
-/**
- * Adds the provided icons.
- * It requires an Angular InjectionContent.
- * The Icons are available until the component is destroyed.
- * Call this function only in the component which actually uses the icon.
- * Importing all icons on the global level is discouraged.
- *
- * When using a string instead of the object to use an icon,
- * use the kebab-case version of the icon name.
- *
- * @example
- * ```ts
- * import { elementIcon } from '@simpl/element-icons/ionic';
- * import { addIcons } from '@siemens/element-ng/icon'
- *
- * @Component({`<si-icon-next [icon]="icons.elementIcon"`})
- * class MyComponent {
- *   icons = addIcons({ elementIcon })
- * }
- * ```
- */
-const addIcons = (icons) => {
-    const iconMap = {};
-    const domSanitizer = inject(DomSanitizer);
-    for (const [key, rawContent] of Object.entries(icons)) {
-        const registeredIcon = registeredIcons.get(key) ?? {
-            content: parseDataSvgIcon(rawContent, domSanitizer),
-            referenceCount: 0
-        };
-        registeredIcon.referenceCount++;
-        registeredIcons.set(key, registeredIcon);
-        iconMap[key] = key;
-    }
-    // Delete registered Icons after Component is destroyed to optimize memory usage.
-    // WeakMap must not be used, as the Icon can only be removed on component destruction.
-    // When using a WeakMap it would also get destroyed if it is not referenced, but the component may use it later again.
-    inject(DestroyRef).onDestroy(() => {
-        for (const key of Object.keys(icons)) {
-            const registeredIcon = registeredIcons.get(key);
-            if (registeredIcon.referenceCount === 1) {
-                registeredIcons.delete(key);
-            }
-            else {
-                registeredIcon.referenceCount--;
-            }
-        }
-    });
-    return iconMap;
-};
-const getIcon = (key) => registeredIcons.get(key)?.content;
-class IconService {
-    themeService = inject(SiThemeService);
-    getIcon(name) {
-        const camelCaseName = this.kebabToCamelCase(name);
-        return this.themeService.themeIcons()[camelCaseName] ?? getIcon(camelCaseName);
-    }
-    kebabToCamelCase(str) {
-        return str.replace(/-./g, match => match.charAt(1).toUpperCase());
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: IconService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: IconService, providedIn: 'root' });
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: IconService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
 /**
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
@@ -310,80 +358,68 @@ const STATUS_ICON_CONFIG = new InjectionToken('STATUS_ICON_CONFIG', {
  * Copyright (c) Siemens 2016 - 2025
  * SPDX-License-Identifier: MIT
  */
-const ICON_CONFIG = new InjectionToken('ICON_CONFIG', {
-    providedIn: 'root',
-    factory: () => ({ disableSvgIcons: true })
-});
 /**
- * Configure how Element handles icons. Provide only once in your global configuration.
+ * @deprecated This component should no longer be used.
+ * Use the {@link SiIconComponent} instead.
+ * Existing usages can be replaced as follows:
  *
- * @experimental
- */
-const provideIconConfig = (config) => ({
-    provide: ICON_CONFIG,
-    useValue: config
-});
-/**
- * Component to render a font or SVG icon depending on the configuration.
- * If no SVG icon is found, the component will fall back to render the icon-font.
- * In that case, an application must ensure that the icon font is loaded.
- * This component will only attach the respective class.
+ * ```html
+ * <!-- before -->
+ * <si-icon icon="element-user" color="text-danger" />
+ * <!-- after -->
+ * <si-icon icon="element-user" class="icon text-danger" />
+ * ```
  *
- * The content of this component is hidden in the a11y tree.
- * If needed, the consumer must set proper labels.
+ * **Important:** Previously, the class `icon` was automatically applied. Unless not needed,
+ * it must now be applied manually.
+ * The icon class scales up the icon compared to its surrounding text.
  *
- * @experimental
+ * Stacked icons need to be constructed in HTML directly.
+ * If applicable, the `si-status-icon` component should be used instead.
+ *
+ * ```html
+ * <!-- before -->
+ * <si-icon
+ *   icon="element-circle-filled"
+ *   color="status-success"
+ *   stackedIcon="element-state-tick"
+ *   stackedColor="status-success-contrast"
+ *   alt="Success"
+ * />
+ *
+ * <!-- after -->
+ * <div class="icon-stack icon" aria-label="Success">
+ *   <si-icon icon="element-circle-filled" class="status-success" />
+ *   <si-icon icon="element-state-tick" class="status-success-contrast" />
+ * </div>
+ * ```
  */
-class SiIconNextComponent {
+class SiIconLegacyComponent {
+    /** Icon token, see {@link https://element.siemens.io/icons/element} */
+    icon = input();
+    /** Color class, see {@link https://element.siemens.io/fundamentals/typography/#color-variants-classes} */
+    color = input();
+    /** Icon token, see {@link https://element.siemens.io/fundamentals/icons/} */
+    stackedIcon = input();
+    /** Color class, see {@link https://element.siemens.io/fundamentals/icons/} */
+    stackedColor = input();
+    /** Alternative name or translation key for icon. Used for A11y. */
+    alt = input();
     /**
-     * Define which icon should be rendered.
-     * Provide using:
-     * - value of the icon map provided by `addIcons`
-     * - (not recommended): plain string in kebab-case or camelCase
-     *
-     * @example
-     * ```ts
-     * import { elementUser } from '@simpl/element-icons/ionic';
-     *
-     * @Component({template: `
-     *   <si-icon-next [icon]="icons.elementUser" />
-     *   <si-icon-next icon="element-user" />
-     *   <si-icon-next icon="elementUser" />
+     * Text-size class for icon size, see {@link https://element.siemens.io/fundamentals/typography/#type-styles-classes}
      *
-     * `})
-     * class MyComponent {
-     *   icons = addIcons(elementUser);
-     * }
-     * ```
+     * @defaultValue 'icon'
      */
-    icon = input.required();
-    config = inject(ICON_CONFIG);
-    iconService = inject(IconService);
-    svgIcon = computed(() => this.config.disableSvgIcons ? undefined : this.iconService.getIcon(this.icon()));
-    /** Icon class, which is ensured to be kebab-case. */
-    fontIcon = computed(() => this.svgIcon() ? undefined : this.camelToKebabCase(this.icon()));
-    camelToKebabCase(str) {
-        return str
-            .replace(/([a-z])([A-Z0-9])/g, '$1-$2')
-            .replace(/([0-9])([A-Z])/g, '$1-$2')
-            .toLowerCase();
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiIconNextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.0.6", type: SiIconNextComponent, isStandalone: true, selector: "si-icon-next", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "attr.data-icon": "icon()" } }, ngImport: i0, template: ` <div
-    aria-hidden="true"
-    [ngClass]="svgIcon() ? '' : fontIcon()"
-    [innerHTML]="svgIcon()"
-  ></div>`, isInline: true, styles: [":host{display:inline-flex;font-weight:400;vertical-align:middle;line-height:1}:host ::ng-deep svg{display:block;block-size:1em;fill:currentColor}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    size = input('icon');
+    altText = computed(() => {
+        return this.alt() ?? this.icon()?.replace('element-', '').split('-').join(' ') ?? '';
+    });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiIconLegacyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiIconLegacyComponent, isStandalone: true, selector: "si-icon-legacy", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, stackedIcon: { classPropertyName: "stackedIcon", publicName: "stackedIcon", isSignal: true, isRequired: false, transformFunction: null }, stackedColor: { classPropertyName: "stackedColor", publicName: "stackedColor", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span\n  class=\"d-inline-block position-relative\"\n  [attr.aria-label]=\"altText() ? (altText() | translate) : null\"\n  [attr.aria-hidden]=\"!altText()\"\n  [attr.role]=\"altText() ? 'img' : 'presentation'\"\n  [ngClass]=\"[icon() ?? '', color() ?? '', size()]\"\n>\n  @if (stackedIcon()) {\n    <i\n      class=\"position-absolute start-0\"\n      aria-hidden=\"true\"\n      [ngClass]=\"[stackedIcon(), stackedColor() ?? '']\"\n    ></i>\n  }\n</span>\n", styles: [":host,span{line-height:1}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiIconNextComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiIconLegacyComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'si-icon-next', imports: [NgClass], template: ` <div
-    aria-hidden="true"
-    [ngClass]="svgIcon() ? '' : fontIcon()"
-    [innerHTML]="svgIcon()"
-  ></div>`, changeDetection: ChangeDetectionStrategy.OnPush, host: {
-                        '[attr.data-icon]': 'icon()'
-                    }, styles: [":host{display:inline-flex;font-weight:400;vertical-align:middle;line-height:1}:host ::ng-deep svg{display:block;block-size:1em;fill:currentColor}\n"] }]
+            args: [{ selector: 'si-icon-legacy', imports: [NgClass, SiTranslatePipe], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n  class=\"d-inline-block position-relative\"\n  [attr.aria-label]=\"altText() ? (altText() | translate) : null\"\n  [attr.aria-hidden]=\"!altText()\"\n  [attr.role]=\"altText() ? 'img' : 'presentation'\"\n  [ngClass]=\"[icon() ?? '', color() ?? '', size()]\"\n>\n  @if (stackedIcon()) {\n    <i\n      class=\"position-absolute start-0\"\n      aria-hidden=\"true\"\n      [ngClass]=\"[stackedIcon(), stackedColor() ?? '']\"\n    ></i>\n  }\n</span>\n", styles: [":host,span{line-height:1}\n"] }]
         }] });
 
 /**
@@ -398,22 +434,22 @@ class SiStatusIconComponent {
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.6", type: SiStatusIconComponent, isStandalone: true, selector: "si-status-icon", inputs: { status: { classPropertyName: "status", publicName: "status", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "icon-stack" }, ngImport: i0, template: `
     @let iconValue = statusIcon();
     @if (iconValue) {
-      <si-icon-next [ngClass]="iconValue.color" [icon]="iconValue.icon" />
-      <si-icon-next [ngClass]="iconValue.stackedColor" [icon]="iconValue.stacked" />
+      <si-icon [ngClass]="iconValue.color" [icon]="iconValue.icon" />
+      <si-icon [ngClass]="iconValue.stackedColor" [icon]="iconValue.stacked" />
       <span class="visually-hidden">{{ iconValue.ariaLabel | translate }}</span>
     }
-  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SiIconNextComponent, selector: "si-icon-next", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: SiIconComponent, selector: "si-icon", inputs: ["icon"] }, { kind: "pipe", type: SiTranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImport: i0, type: SiStatusIconComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'si-status-icon',
-                    imports: [NgClass, SiIconNextComponent, SiTranslatePipe],
+                    imports: [NgClass, SiIconComponent, SiTranslatePipe],
                     template: `
     @let iconValue = statusIcon();
     @if (iconValue) {
-      <si-icon-next [ngClass]="iconValue.color" [icon]="iconValue.icon" />
-      <si-icon-next [ngClass]="iconValue.stackedColor" [icon]="iconValue.stacked" />
+      <si-icon [ngClass]="iconValue.color" [icon]="iconValue.icon" />
+      <si-icon [ngClass]="iconValue.stackedColor" [icon]="iconValue.stacked" />
       <span class="visually-hidden">{{ iconValue.ariaLabel | translate }}</span>
     }
   `,
@@ -431,5 +467,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.6", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { STATUS_ICON_CONFIG, SiIconComponent, SiIconModule, SiIconNextComponent, SiStatusIconComponent, addIcons, element2dEditor, elementAlarmFilled, elementAlarmTick, elementBreadcrumbRoot, elementCalendar, elementCancel, elementChecked, elementCheckedFilled, elementCircleFilled, elementDelete, elementDocument, elementDoubleLeft, elementDoubleRight, elementDown2, elementExport, elementFavorites, elementFavoritesFilled, elementHelp, elementHide, elementLeft2, elementLeft3, elementLeft4, elementLock, elementMenu, elementMinus, elementNotChecked, elementOctagonFilled, elementOk, elementOptionsVertical, elementOutOfService, elementPlus, elementRadioChecked, elementRecordFilled, elementRedo, elementRight2, elementRight3, elementRight4, elementSearch, elementShow, elementSortDown, elementSortUp, elementSoundMute, elementSoundOn, elementSquare45Filled, elementSquareFilled, elementStateExclamationMark, elementStateInfo, elementStatePause, elementStateProgress, elementStateQuestionMark, elementStateTick, elementThumbnails, elementTriangleFilled, elementUpload, elementUser, elementWarningFilled, provideIconConfig };
+export { STATUS_ICON_CONFIG, SiIconComponent, SiIconLegacyComponent, SiIconModule, SiStatusIconComponent, addIcons, element2dEditor, elementAlarmFilled, elementAlarmTick, elementBreadcrumbRoot, elementCalendar, elementCancel, elementChecked, elementCheckedFilled, elementCircleFilled, elementDelete, elementDocument, elementDoubleLeft, elementDoubleRight, elementDown2, elementExport, elementFavorites, elementFavoritesFilled, elementHelp, elementHide, elementLeft2, elementLeft3, elementLeft4, elementLock, elementMenu, elementMinus, elementNotChecked, elementOctagonFilled, elementOk, elementOptionsVertical, elementOutOfService, elementPlus, elementRadioChecked, elementRecordFilled, elementRedo, elementRight2, elementRight3, elementRight4, elementSearch, elementShow, elementSortDown, elementSortUp, elementSoundMute, elementSoundOn, elementSquare45Filled, elementSquareFilled, elementStateExclamationMark, elementStateInfo, elementStatePause, elementStateProgress, elementStateQuestionMark, elementStateTick, elementThumbnails, elementTriangleFilled, elementUpload, elementUser, elementWarningFilled, provideIconConfig };
 //# sourceMappingURL=siemens-element-ng-icon.mjs.map