OZG-7707 show sr label with if

alfa-client/libs/design-system/src/lib/icon/icon.component.spec.ts

@@ -21,16 +21,20 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
+import { existsAsHtmlElement, notExistsAsHtmlElement } from '@alfa-client/test-utils';
 import { provideHttpClient } from '@angular/common/http';
 import { provideZoneChangeDetection } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { provideAngularSvgIcon } from 'angular-svg-icon';
+import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
 import { IconComponent } from './icon.component';
 
 describe('IconComponent', () => {
   let component: IconComponent;
   let fixture: ComponentFixture<IconComponent>;
 
+  const labelSelector: string = getDataTestIdOf('sr-label');
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [IconComponent],
@@ -45,4 +49,24 @@ describe('IconComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  describe('component', () => {
+    describe('label', () => {
+      it('should show', () => {
+        component.label = 'test';
+
+        fixture.detectChanges();
+
+        existsAsHtmlElement(fixture, labelSelector);
+      });
+
+      it('should hide', () => {
+        component.label = '';
+
+        fixture.detectChanges();
+
+        notExistsAsHtmlElement(fixture, labelSelector);
+      });
+    });
+  });
 });

alfa-client/libs/design-system/src/lib/icon/icon.component.ts

@@ -60,7 +60,9 @@ type IconVariants = VariantProps<typeof iconVariants>;
       [svgClass]="twMerge(iconVariants({ size, fill }), class)"
       aria-hidden="true"
     />
-    <span class="sr-only empty:hidden">{{ label }}</span>`,
+    @if (label) {
+      <span class="sr-only" data-test-id="sr-label">{{ label }}</span>
+    }`,
   styles: [':host {@apply block size-fit}'],
 })
 export class IconComponent {