OZG-7707 Add svg icon to admin app

alfa-client/apps/admin/project.json

@@ -22,6 +22,11 @@
             "input": "apps/admin/src/favicon",
             "glob": "**/*",
             "output": ""
+          },
+          {
+            "input": "libs/design-system/src/assets",
+            "glob": "**/*",
+            "output": "assets/icons"
           }
         ],
         "styles": ["apps/admin/src/styles.scss"],

alfa-client/apps/admin/src/main.ts

@@ -44,6 +44,7 @@ import { StoreRouterConnectingModule } from '@ngrx/router-store';
 import { StoreModule } from '@ngrx/store';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { OAuthModule } from 'angular-oauth2-oidc';
+import { provideAngularSvgIcon } from 'angular-svg-icon';
 import { ConfigurationsProviders } from 'libs/admin/configuration-shared/src/lib/configuration.providers';
 import { PostfachProviders } from 'libs/admin/postfach-shared/src/lib/postfach.providers';
 import { SettingsProviders } from 'libs/admin/settings-shared/src/lib/settings.providers';
@@ -113,6 +114,7 @@ loadEnvironment(environment.environmentUrl).then((env) => {
           },
         }),
       ),
+      provideAngularSvgIcon(),
       {
         provide: HTTP_INTERCEPTORS,
         useClass: HttpUnauthorizedInterceptor,

alfa-client/apps/demo/src/app/app.component.html

@@ -64,6 +64,7 @@
           <ods-icon name="accessibility" size="large" color="error" />
           <ods-icon name="accessibility" class="fill-red-500" />
           <ods-icon name="accessibility" size="small" />
+          <ods-icon name="admin-logo" size="unset" />
         </div>
         <h1 class="mb-6 text-2xl font-semibold text-text">Auswertungen</h1>
         <ods-button text="Auswertung hinzufügen" />

alfa-client/apps/demo/src/app/app.component.spec.ts

@@ -22,13 +22,15 @@
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
 import { TestBed } from '@angular/core/testing';
-import { AppComponent } from './app.component';
 import { RouterTestingModule } from '@angular/router/testing';
+import { IconComponent } from '@ods/system';
+import { MockComponent } from 'ng-mocks';
+import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [AppComponent, RouterTestingModule],
+      imports: [AppComponent, RouterTestingModule, MockComponent(IconComponent)],
     }).compileComponents();
   });
 

alfa-client/libs/design-system/src/assets/delete.svg

+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+  <path
+    d="M7 21C6.45 21 5.97917 20.8042 5.5875 20.4125C5.19583 20.0208 5 19.55 5 19V6H4V4H9V3H15V4H20V6H19V19C19 19.55 18.8042 20.0208 18.4125 20.4125C18.0208 20.8042 17.55 21 17 21H7ZM17 6H7V19H17V6ZM9 17H11V8H9V17ZM13 17H15V8H13V17Z" />
+</svg>
\ No newline at end of file

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

@@ -21,7 +21,10 @@
  * Die sprachspezifischen Genehmigungen und Beschränkungen
  * unter der Lizenz sind dem Lizenztext zu entnehmen.
  */
+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 { IconComponent } from './icon.component';
 
 describe('IconComponent', () => {
@@ -31,6 +34,7 @@ describe('IconComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [IconComponent],
+      providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideHttpClient(), provideAngularSvgIcon()],
     }).compileComponents();
 
     fixture = TestBed.createComponent(IconComponent);

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

@@ -36,6 +36,7 @@ const iconVariants = cva('', {
       large: 'size-8',
       'extra-large': 'size-10',
       xxl: 'size-12',
+      unset: '',
     },
     color: {
       primary: 'fill-primary',