feat(sbb-icon): provide compatibility with sbb-angular

src/elements/icon/icon.ts

@@ -1,5 +1,5 @@
-import type { PropertyValues } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
+import { html, type PropertyValues, type TemplateResult } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
 
 import { SbbIconBase } from './icon-base.js';
 
@@ -17,6 +17,13 @@
 
   private _defaultAriaLabel = '';
 
+  /**
+   * The sbb-angular library has a sbb-icon component as well. In order to provide
+   * compatibility with it (as some icons are used internally inside the other sbb-angular
+   * components) we need to check whether the attribute svgicon is used.
+   */
+  @state() private _sbbAngularCompatibility = false;
+
   protected override async fetchSvgIcon(namespace: string, name: string): Promise<string> {
     // If the icon is changing, and we were using the defaultAriaLabel, reset it
     if (this.getAttribute('aria-label') === this._defaultAriaLabel) {
@@ -42,13 +49,29 @@
     }
   }
 
+  public override attributeChangedCallback(
+    name: string,
+    _old: string | null,
+    value: string | null,
+  ): void {
+    if (name === 'svgicon') {
+      this._sbbAngularCompatibility = !!value;
+    } else {
+      super.attributeChangedCallback(name, _old, value);
+    }
+  }
+
   protected override firstUpdated(changedProperties: PropertyValues<this>): void {
     super.firstUpdated(changedProperties);
 
     if (!this.hasAttribute('aria-hidden')) {
       this.setAttribute('aria-hidden', 'true');
     }
   }
+
+  protected override render(): TemplateResult {
+    return this._sbbAngularCompatibility ? html`<slot></slot>` : super.render();
+  }
 }
 
 declare global {