Icon lib moved to shared

apps/isa-app/src/app/app.module.ts

@@ -32,11 +32,11 @@ import { IsaErrorHandler } from './providers/isa.error-handler';
 import { ScanAdapterModule, ScanAdapterService, ScanditScanAdapterModule } from '@adapter/scan';
 import { RootStateService } from './store/root-state.service';
 import * as Commands from './commands';
-import { UiIconModule, UI_ICON_CFG } from '@ui/icon';
 import { PreviewComponent } from './preview';
 import { NativeContainerService } from 'native-container';
 import { ShellModule } from '@shared/shell';
 import { MainComponent } from './main.component';
+import { IconModule } from '@shared/components/icon';
 
 registerLocaleData(localeDe, localeDeExtra);
 registerLocaleData(localeDe, 'de', localeDeExtra);
@@ -106,7 +106,7 @@ export function _notificationsHubOptionsFactory(config: Config, auth: AuthServic
     ScanAdapterModule.forRoot(),
     ScanditScanAdapterModule.forRoot(),
     PlatformModule,
-    UiIconModule.forRoot(),
+    IconModule.forRoot(),
   ],
   providers: [
     {
@@ -135,11 +135,6 @@ export function _notificationsHubOptionsFactory(config: Config, auth: AuthServic
       useClass: IsaErrorHandler,
     },
     { provide: LOCALE_ID, useValue: 'de-DE' },
-    {
-      provide: UI_ICON_CFG,
-      useFactory: (config: Config) => config.get('@ui/icon'),
-      deps: [Config],
-    },
   ],
   bootstrap: [AppComponent],
 })

apps/isa-app/src/config/config.integration.json

@@ -69,5 +69,6 @@
   "checkForUpdates": 3600000,
   "licence": {
     "scandit": "AQZyKCc+BEkNL00Y3h3FjawGLF+INUj7cVb0My91hl8ffiW873T8FTV1k4TIZJx5RwcJlYxhgsxHVcnM4AJgSwJhbAfxJmP/3XGijLlLp3XUIRjQwFtf7UlZAFZ7Vrt1/WSf7kxxrFQ2SE2AQwLqPg9DL+hHEfd4xT/15n8p2q7qUlCKLsV6jF12Pd7koFNSWNL3ZIkRtd1ma99/321dnwAJHFGXqWg5nprJ7sYtqUqNQ8Er9SlvKbhnw3AipHzKpz0O3oNfUsr6NlZivRBhMhCZLo5WpXo1m9uIU8zLEWMNDJ+wGUctcGxE3eCptP2zLXUgxxjB+0EXOUtT/GWUc/Ip61CMiyUf7Paz026E2eYil2yWgfkTP5CUgDMNGZFuAA1T5PhB9FRW51CjAIvwOKVMCvfixJiVoUsXHnWH2ZnXqtbDR/uEZBE7OKoBlaPL4G3Lvgdqym5EjROAztUXb6wOmVDiGzzqgizyZnIcxFBSKJAownGj9Vh4/Y/Ag1xzGzNtjz3ngSRfMfIIq/q2Q51uiLiv7mBVliPvPWMUTfTjnqnK/OSBlR2ID+COJqnUKpQMedPyOT3IMznmM6gQCmyYO5KE0MkfhFh6+pdNi6oJM2iZsxK1Z1V+GRSOIwrJEoajjDJkh439XjXk8NExFvplrLjK/oL/dsHIZiG6U5GVWW92kGkuXkJCeUz1CET3paxbGqwrd53r5d6gFABbC12CtcP2JeH4YYCpHYyPQacf0prj9Hdq3wDztShC9tH+4UQS/GbaDHKcS1ANIyPuTxHmBFtPuCJ9Uagy5QBEc8eAz2nfsbfaUxYzco6u/zhNsFbqp6zgQIxs5OcqDQ=="
-  }
+  },
+  "@shared/icon": "/assets/icons.json"
 }

apps/isa-app/src/config/config.production.json

@@ -70,5 +70,6 @@
   "checkForUpdates": 3600000,
   "licence": {
     "scandit": "AfHi/mY+RbwJD5nC7SuWn3I14pFUOfSbQ2QG//4aV3zWQjwix30kHqsqraA8ZiipDBql8YlwIyV6VPBMUiAX4s9YHDxHHsWwq2BUB3ImzDEcU1jmMH/5yakGUYpCQ68D0iZ8SG9sS0QBb3iFdCHc1r9DFr1cMTxM7zOvb/AUoIVmieHZXnx9ioUgCvczsLiuX3hwvTW3lhbvJ4uUyqTWK4sWFVwoY4AIWSFrPwwrkV2DksMKT5fMJT3GWgPypvTIGwWvpRfLWwKlc1Z3ckyb84khsnaWD2wr+hdgu/K8YIMmgGszm5KIZ/G05YfDNZtQ4jby+5RZvQwWR8rxM35rJgf73OkMSpuL9jw3T0TTAlvpkGRLzVVuCw9VjlBLqfPNEZ6VsEwFuAla9IYUvFHCsjypg2J6UpxHXrTYmbsSu5Jm8frVfS5znPPTO9D/4rF6ZVv2PxY9PgUgJUvwMa/VMc/nse3RRRf8RGT4rUItfJDFO8pujD76vVEWq/KixQRoMdLgDLyxhsFVftkxqhZhyEfFZzsEy49LSojJ28vpHpBWLeCQBmnZ7JZ4C5yOQiqSQV/assBq2zJN2q+vCDp8qy5j1rED1SX5Ec7JpgpgnU4chLIf5Zn7bP/hNGT3pEYBuXeDXXN8ke1pcc3fc3m0FysDG0o56XVCUqImZ8Ezi8eujZciKDrWbtljhKTj7cnfuJx0sVHF6Bh5i4YfgA/Z+NL+MtH2EVIF67e6hEz6PWYTcoh3ybBaJfxb2FNvGJutNKg04GwMhYq6K2IddBt0fDiBt0SGM0oSBlUP3DKCUmXcf2a6ASbrcqv6Wz1jHt0pY4U8bEpg7qSbW3VDyvdPgyQ="
-  }
+  },
+  "@shared/icon": "/assets/icons.json"
 }

apps/isa-app/src/config/config.staging.json

@@ -70,5 +70,6 @@
   "checkForUpdates": 3600000,
   "licence": {
     "scandit": "AfHi/mY+RbwJD5nC7SuWn3I14pFUOfSbQ2QG//4aV3zWQjwix30kHqsqraA8ZiipDBql8YlwIyV6VPBMUiAX4s9YHDxHHsWwq2BUB3ImzDEcU1jmMH/5yakGUYpCQ68D0iZ8SG9sS0QBb3iFdCHc1r9DFr1cMTxM7zOvb/AUoIVmieHZXnx9ioUgCvczsLiuX3hwvTW3lhbvJ4uUyqTWK4sWFVwoY4AIWSFrPwwrkV2DksMKT5fMJT3GWgPypvTIGwWvpRfLWwKlc1Z3ckyb84khsnaWD2wr+hdgu/K8YIMmgGszm5KIZ/G05YfDNZtQ4jby+5RZvQwWR8rxM35rJgf73OkMSpuL9jw3T0TTAlvpkGRLzVVuCw9VjlBLqfPNEZ6VsEwFuAla9IYUvFHCsjypg2J6UpxHXrTYmbsSu5Jm8frVfS5znPPTO9D/4rF6ZVv2PxY9PgUgJUvwMa/VMc/nse3RRRf8RGT4rUItfJDFO8pujD76vVEWq/KixQRoMdLgDLyxhsFVftkxqhZhyEfFZzsEy49LSojJ28vpHpBWLeCQBmnZ7JZ4C5yOQiqSQV/assBq2zJN2q+vCDp8qy5j1rED1SX5Ec7JpgpgnU4chLIf5Zn7bP/hNGT3pEYBuXeDXXN8ke1pcc3fc3m0FysDG0o56XVCUqImZ8Ezi8eujZciKDrWbtljhKTj7cnfuJx0sVHF6Bh5i4YfgA/Z+NL+MtH2EVIF67e6hEz6PWYTcoh3ybBaJfxb2FNvGJutNKg04GwMhYq6K2IddBt0fDiBt0SGM0oSBlUP3DKCUmXcf2a6ASbrcqv6Wz1jHt0pY4U8bEpg7qSbW3VDyvdPgyQ="
-  }
+  },
+  "@shared/icon": "/assets/icons.json"
 }

apps/page/assortment/src/lib/price-update/price-update.component.html

@@ -5,7 +5,7 @@
     class="absolute right-0 top-0 h-14 rounded px-5 text-lg bg-cadet-blue flex flex-row flex-nowrap items-center justify-center"
     type="button"
   >
-    <ui-svg-icon class="mr-2" icon="filter-variant"></ui-svg-icon>
+    <shared-icon class="mr-2" icon="filter-variant"></shared-icon>
     Filter
   </button>
 </div>
@@ -16,7 +16,7 @@
 <shell-filter-overlay #filterOverlay class="relative">
   <div class="relative">
     <button type="button" class="absolute top-4 right-4 text-cadet" (click)="closeFilterOverlay()">
-      <ui-svg-icon [icon]="'close'" [size]="28"></ui-svg-icon>
+      <shared-icon [icon]="'close'" [size]="28"></shared-icon>
     </button>
   </div>
 

apps/page/assortment/src/lib/price-update/price-update.module.ts

@@ -2,13 +2,13 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { SharedFilterOverlayModule } from '@shared/components/filter-overlay';
 import { UiFilterNextModule } from '@ui/filter';
-import { UiIconModule } from '@ui/icon';
 import { UiSpinnerModule } from '@ui/spinner';
 import { PriceUpdateListModule } from './price-update-list';
 import { PriceUpdateComponent } from './price-update.component';
+import { IconComponent } from '@shared/components/icon';
 
 @NgModule({
-  imports: [CommonModule, PriceUpdateListModule, UiIconModule, UiFilterNextModule, SharedFilterOverlayModule, UiSpinnerModule],
+  imports: [CommonModule, PriceUpdateListModule, UiFilterNextModule, SharedFilterOverlayModule, UiSpinnerModule, IconComponent],
   exports: [PriceUpdateComponent],
   declarations: [PriceUpdateComponent],
   providers: [],

apps/page/catalog/src/lib/article-search/search-filter/search-filter.component.html

@@ -8,7 +8,7 @@
         [routerLink]="closeFilterRoute"
         queryParamsHandling="preserve"
       >
-        <ui-svg-icon icon="close" [size]="25"></ui-svg-icon>
+        <shared-icon icon="close" [size]="25"></shared-icon>
       </a>
     </div>
 

apps/page/catalog/src/lib/article-search/search-filter/search-filter.module.ts

@@ -1,13 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { UiIconModule } from '@ui/icon';
 import { UiSpinnerModule } from '@ui/spinner';
 import { ArticleSearchFilterComponent } from './search-filter.component';
-import { FilterNextModule } from 'apps/shared/components/filter/src/lib';
+import { FilterModule } from '@shared/components/filter';
+import { IconComponent } from '@shared/components/icon';
 
 @NgModule({
-  imports: [CommonModule, RouterModule, FilterNextModule, UiIconModule, UiSpinnerModule],
+  imports: [CommonModule, RouterModule, FilterModule, UiSpinnerModule, IconComponent],
   exports: [ArticleSearchFilterComponent],
   declarations: [ArticleSearchFilterComponent],
   providers: [],

apps/page/catalog/src/lib/article-search/search-main/search-main.component.html

@@ -26,7 +26,7 @@
         [routerLink]="openFilterRoute"
         queryParamsHandling="preserve"
       >
-        <ui-svg-icon class="mr-2" icon="filter-variant"></ui-svg-icon>
+        <shared-icon class="mr-2" icon="filter-variant"></shared-icon>
         Filter
       </a>
     </div>

apps/page/catalog/src/lib/article-search/search-main/search-main.module.ts

@@ -1,12 +1,13 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { UiIconModule } from '@ui/icon';
 import { ArticleSearchMainComponent } from './search-main.component';
-import { FilterNextModule } from 'apps/shared/components/filter/src/lib';
+import { FilterModule } from '@shared/components/filter';
 import { RouterModule } from '@angular/router';
+import { IconComponent } from '@shared/components/icon';
+import { UiIconModule } from '@ui/icon';
 
 @NgModule({
-  imports: [CommonModule, RouterModule, UiIconModule, FilterNextModule],
+  imports: [CommonModule, RouterModule, IconComponent, FilterModule, UiIconModule],
   exports: [ArticleSearchMainComponent],
   declarations: [ArticleSearchMainComponent],
   providers: [],

apps/page/catalog/src/lib/article-search/search-results/search-results.component.html

@@ -22,7 +22,7 @@
       [routerLink]="filterRoute"
       queryParamsHandling="preserve"
     >
-      <ui-svg-icon class="mr-2" icon="filter-variant"></ui-svg-icon>
+      <shared-icon class="mr-2" icon="filter-variant"></shared-icon>
       Filter
     </a>
   </div>

apps/page/catalog/src/lib/article-search/search-results/search-results.module.ts

@@ -15,9 +15,10 @@ import { SearchResultItemLoadingComponent } from './search-result-item-loading.c
 import { SearchResultItemComponent } from './search-result-item.component';
 import { ArticleSearchResultsComponent } from './search-results.component';
 import { SearchResultSelectedPipe } from './selected/search-result-selected.pipe';
-import { FilterAutocompleteProvider, FilterNextModule, OrderByFilterModule } from 'apps/shared/components/filter/src/lib';
+import { FilterAutocompleteProvider, FilterModule, OrderByFilterModule } from '@shared/components/filter';
 import { FocusSearchboxEvent } from '../focus-searchbox.event';
 import { ArticleSearchMainAutocompleteProvider } from '../providers';
+import { IconComponent } from '@shared/components/icon';
 
 @NgModule({
   imports: [
@@ -32,7 +33,8 @@ import { ArticleSearchMainAutocompleteProvider } from '../providers';
     OrderByFilterModule,
     ScrollingModule,
     UiTooltipModule,
-    FilterNextModule,
+    FilterModule,
+    IconComponent,
   ],
   exports: [ArticleSearchResultsComponent, SearchResultItemComponent],
   declarations: [

apps/page/customer-order/src/lib/customer-order-search/customer-order-search.component.html

@@ -5,7 +5,7 @@
     [routerLink]="filterRoute"
     queryParamsHandling="preserve"
   >
-    <ui-svg-icon class="mr-2" icon="filter-variant"></ui-svg-icon>
+    <shared-icon class="mr-2" icon="filter-variant"></shared-icon>
     Filter
   </a>
 </div>

apps/page/customer-order/src/lib/customer-order-search/customer-order-search.module.ts

@@ -9,6 +9,7 @@ import { UiFilterNextModule } from '@ui/filter';
 import { SharedFilterOverlayModule } from '@shared/components/filter-overlay';
 import { UiSpinnerModule } from '@ui/spinner';
 import { CustomerOrderSearchStore } from './customer-order-search.store';
+import { IconComponent } from '@shared/components/icon';
 
 @NgModule({
   imports: [
@@ -19,6 +20,7 @@ import { CustomerOrderSearchStore } from './customer-order-search.store';
     SharedFilterOverlayModule,
     UiSpinnerModule,
     OrderBranchIdInputComponent,
+    IconComponent,
   ],
   exports: [CustomerOrderSearchComponent],
   providers: [CustomerOrderSearchStore],

apps/page/customer-order/src/lib/customer-order-search/search-results/customer-order-search-results.component.html

@@ -5,7 +5,7 @@
     [routerLink]="filterRoute"
     queryParamsHandling="preserve"
   >
-    <ui-svg-icon class="mr-2" icon="filter-variant"></ui-svg-icon>
+    <shared-icon class="mr-2" icon="filter-variant"></shared-icon>
     Filter
   </a> -->
 

apps/page/customer-rd/src/lib/components/customer-type-selector/customer-type-selector.component.scss

@@ -1,5 +1,5 @@
 :host {
-  @apply flex flex-row flex-wrap text-card-sub justify-center;
+  @apply flex flex-row flex-wrap text-2xl justify-center;
 }
 
 ui-checkbox {

apps/page/customer-rd/src/lib/components/form-blocks/p4m-number/p4m-number-form-block.component.html

@@ -2,5 +2,5 @@
   <input uiInput type="text" [formControl]="control" [tabindex]="tabIndexStart" [readonly]="readonly" [autofocus]="focusAfterInit" />
 </ui-form-control>
 <button type="button" *ngIf="!readonly && canScan()" (click)="scan()">
-  <ui-svg-icon icon="barcode-scan" [size]="32"></ui-svg-icon>
+  <shared-icon icon="barcode-scan" [size]="32"></shared-icon>
 </button>

apps/page/customer-rd/src/lib/components/form-blocks/p4m-number/p4m-number-form-block.component.scss

@@ -5,7 +5,7 @@
 button {
   @apply absolute -right-2 top-0 h-14 w-14 border-none outline-none bg-transparent items-center justify-center rounded-full bg-brand;
 
-  ui-svg-icon {
+  shared-icon {
     @apply flex justify-center items-center text-white;
   }
 }

apps/page/customer-rd/src/lib/components/form-blocks/p4m-number/p4m-number-form-block.module.ts

@@ -6,10 +6,10 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { UiFormControlModule } from '@ui/form-control';
 import { UiInputModule } from '@ui/input';
 import { UiCommonModule } from '@ui/common';
-import { UiIconModule } from '@ui/icon';
+import { IconComponent } from '@shared/components/icon';
 
 @NgModule({
-  imports: [CommonModule, UiCommonModule, ReactiveFormsModule, UiFormControlModule, UiInputModule, UiIconModule],
+  imports: [CommonModule, UiCommonModule, ReactiveFormsModule, UiFormControlModule, UiInputModule, IconComponent],
   exports: [P4mNumberFormBlockComponent],
   declarations: [P4mNumberFormBlockComponent],
 })

apps/page/customer-rd/src/lib/components/split-screen/split-screen.component.ts

@@ -1,4 +1,3 @@
-import { BreakpointObserver } from '@angular/cdk/layout';
 import { CommonModule } from '@angular/common';
 import {
   Component,
@@ -9,9 +8,10 @@ import {
   AfterContentInit,
   ChangeDetectorRef,
   OnDestroy,
+  HostListener,
 } from '@angular/core';
 import { BehaviorSubject, Subject } from 'rxjs';
-import { map, takeUntil } from 'rxjs/operators';
+import { takeUntil } from 'rxjs/operators';
 import { SideTemplateDirective } from './side-template.directive';
 import { EnvironmentService } from '@core/environment';
 
@@ -24,18 +24,6 @@ import { EnvironmentService } from '@core/environment';
   imports: [CommonModule],
 })
 export class SplitScreenComponent implements AfterContentInit, OnDestroy {
-  static OBSERVED_BREAKPOINTS = ['(max-width: 1024px)'];
-
-  isTablet$ = this._breakpointObserver.observe(SplitScreenComponent.OBSERVED_BREAKPOINTS).pipe(map((result) => result.matches));
-
-  private _isTablet = false;
-  get isTablet() {
-    return this._isTablet;
-  }
-  set isTablet(value: boolean) {
-    this._isTablet = value;
-  }
-
   side$ = new BehaviorSubject<string>('default');
 
   @Input()
@@ -57,7 +45,7 @@ export class SplitScreenComponent implements AfterContentInit, OnDestroy {
 
   private _onDestroy$ = new Subject<void>();
 
-  constructor(private _breakpointObserver: BreakpointObserver, private _cdr: ChangeDetectorRef, private _envService: EnvironmentService) {}
+  constructor(private _env: EnvironmentService, private _cdr: ChangeDetectorRef) {}
 
   ngAfterContentInit(): void {
     this.sideTemplates.changes.pipe(takeUntil(this._onDestroy$)).subscribe(() => {
@@ -67,11 +55,6 @@ export class SplitScreenComponent implements AfterContentInit, OnDestroy {
     this.side$.pipe(takeUntil(this._onDestroy$)).subscribe(() => {
       this.checkAndUpdateSide();
     });
-
-    this.isTablet$.pipe(takeUntil(this._onDestroy$)).subscribe((isTablet) => {
-      this.isTablet = isTablet;
-      this.checkAndUpdateSide();
-    });
   }
 
   ngOnDestroy(): void {
@@ -79,8 +62,9 @@ export class SplitScreenComponent implements AfterContentInit, OnDestroy {
     this._onDestroy$.complete();
   }
 
+  @HostListener('window:resize')
   private checkAndUpdateSide() {
-    if (this.isTablet) {
+    if (this._env.matchDesktopSmall()) {
       this.sideTemplate = undefined;
       this._cdr.markForCheck();
       return;

apps/page/customer-rd/src/lib/create-customer/create-customer.scss

@@ -1,5 +1,5 @@
 :host {
-  @apply block bg-white rounded-card px-20 py-10;
+  @apply block bg-white rounded px-20 py-10;
 }
 
 h1.title {
@@ -19,7 +19,7 @@ form {
 }
 
 button.cta-submit {
-  @apply sticky left-1/2 bottom-8 text-center bg-brand text-cta-l text-white font-bold px-7 py-3 rounded-full transform -translate-x-1/2 transition-all duration-200 ease-in-out;
+  @apply sticky left-1/2 bottom-8 text-center bg-brand text-lg text-white font-bold px-7 py-3 rounded-full transform -translate-x-1/2 transition-all duration-200 ease-in-out;
 
   &:disabled {
     @apply bg-active-branch cursor-not-allowed;

apps/page/customer-rd/src/lib/create-customer/customer-create-side-view/customer-create-side-view.component.css

@@ -1,5 +1,5 @@
 :host {
-  @apply bg-surface text-surface-content rounded-card flex flex-col h-full;
+  @apply bg-surface text-surface-content rounded flex flex-col h-full;
 }
 
 .side-view-shadow {

apps/page/customer-rd/src/lib/customer-search/main-side-view/main-side-view.component.css

@@ -1,5 +1,5 @@
 :host {
-  @apply bg-surface text-surface-content rounded-card flex flex-col h-full;
+  @apply bg-surface text-surface-content rounded flex flex-col h-full;
 }
 
 .side-view-shadow {

apps/page/customer-rd/src/lib/modals/address-selection-modal/address-selection-modal.component.scss

@@ -4,15 +4,15 @@
 
 h2,
 p {
-  @apply text-center text-regular;
+  @apply text-center text-base;
 }
 
 h2 {
-  @apply font-bold text-card-sub;
+  @apply font-bold text-2xl;
 }
 
 ul {
-  @apply list-none text-regular -mx-4 p-0 mt-px-35;
+  @apply list-none text-base -mx-4 p-0 mt-px-35;
 
   li {
     @apply flex flex-row items-center justify-between border-glitter border-t-4 border-b-0 border-solid border-r-0 border-l-0 py-px-15 px-px-25;
@@ -22,7 +22,7 @@ ul {
     }
 
     button {
-      @apply border-none outline-none bg-transparent text-brand text-cta-l text-right font-bold;
+      @apply border-none outline-none bg-transparent text-brand text-lg text-right font-bold;
     }
   }
 }
@@ -32,5 +32,5 @@ ul {
 }
 
 .select-btn {
-  @apply border-none outline-none bg-brand text-white font-bold text-cta-l px-px-25 py-px-15 rounded-full my-8;
+  @apply border-none outline-none bg-brand text-white font-bold text-lg px-px-25 py-px-15 rounded-full my-8;
 }

apps/page/customer-rd/src/lib/modals/cant-add-customer-to-cart-modal/cant-add-customer-to-cart.component.scss

@@ -8,11 +8,11 @@ h2 {
 
 h2,
 p {
-  @apply text-center text-card-sub font-bold;
+  @apply text-center text-2xl font-bold;
 }
 
 h2 {
-  @apply font-bold text-card-sub;
+  @apply font-bold text-2xl;
 }
 
 p {
@@ -24,9 +24,9 @@ p {
 }
 
 .search-btn {
-  @apply border-4 border-solid border-brand outline-none bg-white text-brand font-bold text-cta-l px-px-25 py-px-15 rounded-full no-underline;
+  @apply border-4 border-solid border-brand outline-none bg-white text-brand font-bold text-lg px-px-25 py-px-15 rounded-full no-underline;
 }
 
 .create-btn {
-  @apply border-none outline-none bg-brand text-white font-bold text-cta-l px-px-25 py-px-15 rounded-full no-underline;
+  @apply border-none outline-none bg-brand text-white font-bold text-lg px-px-25 py-px-15 rounded-full no-underline;
 }

apps/page/customer-rd/src/lib/modals/cant-select-guest/cant-select-guest-modal.component.scss

@@ -16,11 +16,11 @@ h2 {
 
 h2,
 p {
-  @apply text-center text-card-sub font-bold;
+  @apply text-center text-xl font-bold;
 }
 
 h2 {
-  @apply font-bold text-card-sub;
+  @apply font-bold text-xl;
 }
 
 p {
@@ -32,9 +32,9 @@ p {
 }
 
 .search-btn {
-  @apply border-4 border-solid border-brand outline-none bg-white text-brand font-bold text-cta-l px-px-25 py-px-15 rounded-full no-underline;
+  @apply border-4 border-solid border-brand outline-none bg-white text-brand font-bold text-lg px-px-25 py-px-15 rounded-full no-underline;
 }
 
 .create-btn {
-  @apply border-none outline-none bg-brand text-white font-bold text-cta-l px-px-25 py-px-15 rounded-full no-underline;
+  @apply border-none outline-none bg-brand text-white font-bold text-lg px-px-25 py-px-15 rounded-full no-underline;
 }

apps/page/customer/src/lib/customer-details/customer-details.component.html

@@ -21,7 +21,7 @@
     <p class="info">Sind Ihre {{ (customerType$ | async) === 'b2b' ? 'Firmendaten' : 'Kundendaten' }} korrekt?</p>
     <div class="tags">
       <div class="tag" *ngFor="let feature of displayCustomerType$ | async">
-        <ui-svg-icon [icon]="feature.key"></ui-svg-icon>
+        <shared-icon [icon]="feature.key"></shared-icon>
         {{ feature.description }}
       </div>
     </div>

apps/page/customer/src/lib/customer-search/search-results/customer-result-card/customer-result-card.component.html

@@ -32,7 +32,7 @@
   <ng-container>
     <ng-container *ngFor="let feature of customer?.features">
       <div class="feature" *ngIf="feature.group === 'd-customertype'">
-        <ui-svg-icon [icon]="feature.key"></ui-svg-icon>
+        <shared-icon [icon]="feature.key"></shared-icon>
         <span>{{ feature.description }}</span>
       </div>
     </ng-container>

apps/page/customer/src/lib/form-blocks/p4m-number/p4m-number-form-block.component.html

@@ -2,5 +2,5 @@
   <input uiInput type="text" [formControl]="control" [tabindex]="tabIndexStart" [readonly]="readonly" [autofocus]="focusAfterInit" />
 </ui-form-control>
 <button type="button" *ngIf="!readonly && canScan()" (click)="scan()">
-  <ui-svg-icon icon="barcode-scan" [size]="32"></ui-svg-icon>
+  <shared-icon icon="barcode-scan" [size]="32"></shared-icon>
 </button>

apps/page/customer/src/lib/form-blocks/p4m-number/p4m-number-form-block.component.scss

@@ -5,7 +5,7 @@
 button {
   @apply absolute -right-2 top-0 h-14 w-14 border-none outline-none bg-transparent items-center justify-center rounded-full bg-brand;
 
-  ui-svg-icon {
+  shared-icon {
     @apply flex justify-center items-center text-white;
   }
 }

apps/page/customer/src/lib/form-blocks/p4m-number/p4m-number-form-block.module.ts

@@ -6,10 +6,10 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { UiFormControlModule } from '@ui/form-control';
 import { UiInputModule } from '@ui/input';
 import { UiCommonModule } from '@ui/common';
-import { UiIconModule } from '@ui/icon';
+import { IconComponent } from '@shared/components/icon';
 
 @NgModule({
-  imports: [CommonModule, UiCommonModule, ReactiveFormsModule, UiFormControlModule, UiInputModule, UiIconModule],
+  imports: [CommonModule, UiCommonModule, ReactiveFormsModule, UiFormControlModule, UiInputModule, IconComponent],
   exports: [P4mNumberFormBlockComponent],
   declarations: [P4mNumberFormBlockComponent],
 })

apps/page/package-inspection/src/lib/package-result/package-result.component.html

@@ -5,7 +5,7 @@
     type="button"
     (click)="openFilter()"
   >
-    <ui-svg-icon icon="filter-variant"></ui-svg-icon>
+    <shared-icon icon="filter-variant"></shared-icon>
     Filter
   </button>
 </div>
@@ -22,7 +22,7 @@
 <shell-filter-overlay #filterOverlay class="relative">
   <div class="relative">
     <button type="button" class="absolute top-4 right-4 text-cadet" (click)="closeFilterOverlay()">
-      <ui-svg-icon [icon]="'close'" [size]="28"></ui-svg-icon>
+      <shared-icon [icon]="'close'" [size]="28"></shared-icon>
     </button>
   </div>
 

apps/page/package-inspection/src/lib/package-result/package-result.module.ts

@@ -2,14 +2,14 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { PackageResultComponent } from './package-result.component';
-import { UiIconModule } from '@ui/icon';
 import { SharedFilterOverlayModule } from '@shared/components/filter-overlay';
 import { UiFilterNextModule } from '@ui/filter';
 import { UiSpinnerModule } from '@ui/spinner';
 import { PackageListModule } from '@shared/components/package-inspection/package-list';
+import { IconComponent } from '@shared/components/icon';
 
 @NgModule({
-  imports: [CommonModule, PackageListModule, UiIconModule, UiFilterNextModule, SharedFilterOverlayModule, UiSpinnerModule],
+  imports: [CommonModule, PackageListModule, IconComponent, UiFilterNextModule, SharedFilterOverlayModule, UiSpinnerModule],
   exports: [PackageResultComponent],
   declarations: [PackageResultComponent],
 })

apps/shared/components/branch-selector/src/lib/branch-selector.component.html

@@ -1,6 +1,6 @@
 <div class="shared-branch-selector-input-container" (click)="branchInput.focus(); openComplete()">
   <button (click)="onClose($event)" type="button" class="shared-branch-selector-input-icon p-2">
-    <ui-svg-icon class="text-[#AEB7C1]" icon="magnify" [size]="32"></ui-svg-icon>
+    <shared-icon class="text-[#AEB7C1]" icon="magnify" [size]="32"></shared-icon>
   </button>
   <input
     #branchInput
@@ -14,7 +14,7 @@
     (keyup)="onKeyup($event)"
   />
   <button class="shared-branch-selector-clear-input-icon" *ngIf="(query$ | async)?.length > 0" type="button" (click)="clear()">
-    <ui-svg-icon class="text-[#1F466C]" icon="close" [size]="32"></ui-svg-icon>
+    <shared-icon class="text-[#1F466C]" icon="close" [size]="32"></shared-icon>
   </button>
 </div>
 <ui-autocomplete class="shared-branch-selector-autocomplete z-modal w-full">

apps/shared/components/branch-selector/src/lib/branch-selector.component.ts

@@ -18,12 +18,12 @@ import { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR } from '@angular/f
 import { BranchDTO, BranchType } from '@swagger/checkout';
 import { UiAutocompleteComponent, UiAutocompleteModule } from '@ui/autocomplete';
 import { UiCommonModule } from '@ui/common';
-import { UiIconModule } from '@ui/icon';
 import { isNaN } from 'lodash';
 import { asapScheduler, Subject } from 'rxjs';
 import { takeUntil, withLatestFrom } from 'rxjs/operators';
 import { BranchSelectorStore } from './branch-selector.store';
 import { AuthService } from '@core/auth';
+import { IconComponent } from '@shared/components/icon';
 
 @Component({
   selector: 'shared-branch-selector',
@@ -39,7 +39,7 @@ import { AuthService } from '@core/auth';
       multi: true,
     },
   ],
-  imports: [CommonModule, FormsModule, UiIconModule, UiAutocompleteModule, UiCommonModule],
+  imports: [CommonModule, FormsModule, IconComponent, UiAutocompleteModule, UiCommonModule],
   standalone: true,
   exportAs: 'sharedBranchSelector',
 })

apps/shared/components/breadcrumb/src/lib/breadcrumb.component.html

@@ -6,7 +6,7 @@
     [routerLink]="crumb.path"
     [queryParams]="crumb.params"
   >
-    <ui-svg-icon icon="arrow-left" [size]="18"></ui-svg-icon> Zurück
+    <shared-icon icon="arrow-left" [size]="18"></shared-icon> Zurück
   </button>
 </div>
 <div class="shared-breadcrumb__crumbs">
@@ -17,7 +17,7 @@
       </span>
     </a>
     <div class="shared-breadcrumb__chevron" *ngIf="!last">
-      <ui-svg-icon icon="chevron-right"></ui-svg-icon>
+      <shared-icon icon="chevron-right"></shared-icon>
     </div>
   </ng-container>
 </div>

apps/shared/components/breadcrumb/src/lib/breadcrumb.module.ts

@@ -1,12 +1,12 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { UiIconModule } from '@ui/icon';
 import { BreadcrumbComponent } from './breadcrumb.component';
+import { IconComponent } from '@shared/components/icon';
 
 @NgModule({
   declarations: [BreadcrumbComponent],
-  imports: [CommonModule, RouterModule, UiIconModule],
+  imports: [CommonModule, RouterModule, IconComponent],
   exports: [BreadcrumbComponent],
 })
 export class BreadcrumbModule {}

apps/shared/components/checkbox/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

apps/shared/components/checkbox/src/lib/checkbox-group.component.html

@@ -0,0 +1 @@
+<ng-content></ng-content>

apps/shared/components/checkbox/src/lib/checkbox-group.component.scss

@@ -0,0 +1,3 @@
+:host {
+  @apply flex flex-row justify-center gap-6;
+}

apps/shared/components/checkbox/src/lib/checkbox-group.component.ts

@@ -0,0 +1,110 @@
+import {
+  AfterContentInit,
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  ContentChildren,
+  forwardRef,
+  Input,
+  QueryList,
+} from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { CheckboxComponent } from './checkbox.component';
+
+@Component({
+  selector: 'shared-checkbox-group',
+  templateUrl: 'checkbox-group.component.html',
+  styleUrls: ['checkbox-group.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => CheckboxGroupComponent),
+      multi: true,
+    },
+  ],
+  standalone: true,
+})
+export class CheckboxGroupComponent implements AfterContentInit, ControlValueAccessor {
+  @Input() max: number = undefined; // undefined = infinite active checkboxes possible
+
+  values: any[] = [];
+  disabled: boolean;
+
+  @ContentChildren(CheckboxComponent, { read: CheckboxComponent, descendants: true })
+  checkboxes: QueryList<CheckboxComponent>;
+
+  private onChange = (v: any) => {};
+  private onTouched = () => {};
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  writeValue(obj: any): void {
+    this.values = Array.isArray(obj) ? [...obj] : [];
+    this.updateValuesOfChildren();
+    this.cdr.markForCheck();
+  }
+  registerOnChange(fn: any): void {
+    this.onChange = fn;
+  }
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+    this.setDisabledStateOfChildren(isDisabled);
+  }
+
+  ngAfterContentInit(): void {
+    this.registerOnCheckboxChange();
+    this.updateValuesOfChildren();
+    this.setDisabledStateOfChildren(this.disabled);
+    this.checkboxes.changes.subscribe(() => {
+      this.registerOnCheckboxChange();
+      this.updateValuesOfChildren();
+      this.setDisabledStateOfChildren(this.disabled);
+    });
+  }
+
+  setDisabledStateOfChildren(isDisabled: boolean) {
+    this.checkboxes?.forEach((checkbox) => {
+      checkbox.setDisabledState(isDisabled);
+    });
+  }
+
+  updateValuesOfChildren() {
+    this.checkboxes?.forEach((checkbox) => {
+      checkbox.selectValue(
+        this.values?.find((value) => value === checkbox.value),
+        false
+      );
+    });
+  }
+
+  registerOnCheckboxChange() {
+    this.checkboxes.forEach((cb) => cb.registerOnChangeForParent((c, v) => this.checkboxChanged(c, v)));
+  }
+
+  checkboxChanged(checked: boolean, value: any) {
+    if (checked) {
+      this.values.push(value);
+    } else {
+      this.values = this.values.filter((v) => v !== value);
+    }
+
+    this.validateCheckboxes();
+    this.updateValuesOfChildren();
+
+    this.onChange(this.values);
+    this.onTouched();
+  }
+
+  validateCheckboxes(): void {
+    if (this.max === undefined) {
+      return;
+    }
+    while (this.values.length > this.max) {
+      this.values = this.values.filter((v, i) => i !== 0);
+    }
+  }
+}

apps/shared/components/checkbox/src/lib/checkbox.component.html

@@ -0,0 +1,8 @@
+<ui-icon *ngIf="showCheckbox && !indeterminate" size="20px" [icon]="icon"></ui-icon>
+<shared-icon
+  *ngIf="indeterminate"
+  [size]="16"
+  icon="mat-remove"
+  class="border-2 border-solid border-active-customer rounded text-active-customer"
+></shared-icon>
+<ng-content></ng-content>

apps/shared/components/checkbox/src/lib/checkbox.component.scss

@@ -0,0 +1,54 @@
+:host {
+  @apply inline-grid box-border items-center gap-4 cursor-pointer;
+  grid-template-columns: auto 1fr;
+
+  &.checked ::ng-deep {
+    @apply font-bold;
+  }
+
+  &.disabled {
+    @apply cursor-not-allowed;
+  }
+
+  &.style-filled {
+    ui-icon[icon='checked'] {
+      @apply rounded-sm;
+    }
+  }
+
+  &.readonly {
+    @apply cursor-not-allowed;
+  }
+}
+
+::ng-deep .customer ui-checkbox {
+  ui-icon {
+    @apply text-active-customer;
+  }
+
+  &.disabled {
+    @apply text-ucla-blue;
+  }
+
+  &.style-filled {
+    ui-icon[icon='checked'] {
+      @apply text-white bg-active-customer;
+    }
+  }
+}
+
+::ng-deep .branch ui-checkbox {
+  ui-icon {
+    @apply text-active-branch;
+  }
+
+  &.disabled ::ng-deep {
+    @apply text-cool-grey;
+  }
+
+  &.style-filled {
+    ui-icon[icon='checked'] {
+      @apply text-white bg-active-branch;
+    }
+  }
+}

apps/shared/components/checkbox/src/lib/checkbox.component.ts

@@ -0,0 +1,117 @@
+import { NgIf } from '@angular/common';
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, forwardRef, HostBinding, HostListener, Input } from '@angular/core';
+import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
+
+@Component({
+  selector: 'shared-checkbox',
+  templateUrl: 'checkbox.component.html',
+  styleUrls: ['checkbox.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => CheckboxComponent),
+      multi: true,
+    },
+  ],
+  standalone: true,
+  imports: [NgIf, IconMo],
+})
+export class CheckboxComponent implements ControlValueAccessor {
+  private selected: any;
+  @Input() value: any = true;
+  @Input() showCheckbox = true;
+
+  @HostBinding('class.disabled') @Input() disabled: boolean;
+  @HostBinding('class.checked') get checked(): boolean {
+    return this.selected == this.value;
+  }
+
+  @Input()
+  indeterminate = false;
+
+  get icon() {
+    if (this.showCheckbox) {
+      if (this.design === 'default') {
+        return this.checked ? 'checkbox_checked' : 'checkbox';
+      }
+      if (this.design === 'filled') {
+        return this.checked ? 'checked' : 'checkbox';
+      }
+    }
+  }
+
+  @Input()
+  design: 'default' | 'filled' = 'default';
+
+  @HostBinding('class')
+  get styleClass() {
+    return `style-${this.design}`;
+  }
+
+  @Input()
+  @HostBinding('class.readonly')
+  readonly = false;
+
+  @Input()
+  name: string;
+
+  private onChange = (v: any) => {};
+  private onChangeForParent = (checked: boolean, value: any) => {};
+  private onTouched = () => {};
+
+  constructor(private cdr: ChangeDetectorRef) {}
+
+  writeValue(obj: any): void {
+    this.selectValue(obj, false);
+  }
+
+  registerOnTouched(fn: any): void {
+    this.onTouched = fn;
+  }
+
+  registerOnChange(fn: any) {
+    this.onChange = fn;
+  }
+
+  registerOnChangeForParent(fn: (checked: boolean, value: any) => void) {
+    this.onChangeForParent = fn;
+  }
+
+  setDisabledState?(isDisabled: boolean): void {
+    this.disabled = isDisabled;
+    this.cdr.markForCheck();
+  }
+
+  selectValue(value: any, emitEvent = true) {
+    this.selected = value;
+
+    if (emitEvent) {
+      this.onChange(this.value);
+      this.onChangeForParent(this.checked, this.value);
+      this.onTouched();
+    }
+
+    this.cdr.markForCheck();
+  }
+
+  @HostListener('click')
+  @HostListener('keydown.enter')
+  @HostListener('keydown.space')
+  select() {
+    if (this.disabled || this.readonly) {
+      return;
+    }
+    if (this.checked) {
+      this.selected = undefined;
+    } else {
+      this.selected = this.value;
+    }
+
+    this.onChange(this.checked ? this.value : undefined);
+    this.onChangeForParent(this.checked, this.value);
+
+    this.onTouched();
+    this.cdr.markForCheck();
+  }
+}

apps/shared/components/checkbox/src/lib/checkbox.module.ts

@@ -0,0 +1,12 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { UiIconModule } from '@ui/icon';
+import { CheckboxComponent } from './checkbox.component';
+import { CheckboxGroupComponent } from './checkbox-group.component';
+
+@NgModule({
+  declarations: [CheckboxComponent, CheckboxGroupComponent],
+  imports: [CommonModule, UiIconModule],
+  exports: [CheckboxComponent, CheckboxGroupComponent],
+})
+export class UiCheckboxModule {}

apps/shared/components/checkbox/src/lib/index.ts

@@ -0,0 +1,3 @@
+export * from './checkbox-group.component';
+export * from './checkbox.component';
+export * from './checkbox.module';

apps/shared/components/filter/src/lib/filter-group/filter-filter-group-filter/filter-filter-group-filter.component.html

@@ -12,10 +12,10 @@
         {{ input?.label }}
       </div>
       <span class="w-[14px] h-[14px] flex items-center justify-center text-h3 text-[#596470]" *ngIf="activeInput !== input"
-        ><ui-svg-icon icon="add"></ui-svg-icon
+        ><shared-icon icon="add"></shared-icon
       ></span>
       <span class="w-[14px] h-[14px] flex items-center justify-center text-h3 text-black" *ngIf="activeInput === input"
-        ><ui-svg-icon class="mr-[1px]" icon="remove"></ui-svg-icon
+        ><shared-icon class="mr-[1px]" icon="remove"></shared-icon
       ></span>
     </button>
   </div>

apps/shared/components/filter/src/lib/filter-group/filter-filter-group-filter/filter-filter-group-filter.module.ts

@@ -3,11 +3,11 @@ import { CommonModule } from '@angular/common';
 
 import { FilterFilterGroupFilterComponent } from './filter-filter-group-filter.component';
 import { FilterInputOptionsModule } from '../../shared/filter-input-options';
-import { UiIconModule } from '@ui/icon';
 import { FilterInputModule } from '../../shared/filter-input';
+import { IconComponent } from '@shared/components/icon';
 
 @NgModule({
-  imports: [CommonModule, UiIconModule, FilterInputOptionsModule, FilterInputModule],
+  imports: [CommonModule, IconComponent, FilterInputOptionsModule, FilterInputModule],
   exports: [FilterFilterGroupFilterComponent],
   declarations: [FilterFilterGroupFilterComponent],
 })

apps/shared/components/icon/ng-package.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+  "lib": {
+    "entryFile": "src/public-api.ts"
+  }
+}

apps/shared/components/icon/src/lib/icon-registry.ts

@@ -0,0 +1,110 @@
+import { Injectable } from '@angular/core';
+import { Icon, IconAlias, IconConfig } from './interfaces';
+import { IconLoader } from './loader';
+import { Observable, Subject, isObservable } from 'rxjs';
+
+@Injectable()
+export class IconRegistry {
+  private _icons = new Map<string, Icon>();
+  private _aliases = new Map<string, string>();
+  private _fallback: string;
+  private _viewBox: string;
+
+  updated = new Subject<void>();
+
+  private _initComplete = false;
+
+  constructor(private _iconLoader: IconLoader) {
+    this._loadIcons();
+  }
+
+  private async _loadIcons(): Promise<void> {
+    const load = this._iconLoader.getIcons();
+
+    if (load instanceof Promise) {
+      const config = await load;
+      this._init(config);
+    } else if (isObservable(load)) {
+      load.subscribe((config) => {
+        this._init(config);
+      });
+    } else {
+      this._init(load);
+    }
+  }
+
+  private _init(config: IconConfig): void {
+    this.register(...config.icons);
+    this.alias(...config.aliases);
+    this.setViewBox(config.viewBox);
+    this.setFallback(config.fallback);
+
+    this._initComplete = true;
+
+    this.updated.next();
+  }
+
+  register(...icons: Icon[]): IconRegistry {
+    icons?.forEach((icon) => {
+      this._icons.set(icon.name, icon);
+    });
+
+    return this;
+  }
+
+  setViewBox(viewBox: string): void {
+    this._viewBox = viewBox;
+  }
+
+  alias(...aliases: IconAlias[]): IconRegistry {
+    aliases?.forEach((alias) => {
+      this._aliases.set(alias.alias, alias.name);
+    });
+
+    return this;
+  }
+
+  setFallback(name: string): void {
+    this._fallback = name;
+  }
+
+  get(name: string): Icon | undefined {
+    const alias = this._aliases.get(name);
+    let iconName = name;
+    if (alias) {
+      iconName = alias;
+    }
+
+    let icon = this._icons.get(iconName);
+
+    if (!icon && this._initComplete) {
+      if (alias) {
+        console.warn(`Not found: Icon with name ${name} (${iconName})`);
+      } else {
+        console.warn(`Unable to find icon: '${name}'`);
+      }
+    }
+
+    if (!icon && this._fallback) {
+      icon = this._icons.get(this._fallback);
+    }
+
+    return { ...icon, viewBox: icon?.viewBox || this._viewBox };
+  }
+
+  get$(name: string): Observable<Icon | undefined> {
+    return new Observable<Icon | undefined>((subscriber) => {
+      let icon = this.get(name);
+      subscriber.next(icon);
+      subscriber.complete();
+
+      const sub = this.updated.subscribe(() => {
+        icon = this.get(name);
+        subscriber.next(icon);
+        subscriber.complete();
+      });
+
+      return () => sub.unsubscribe();
+    });
+  }
+}

apps/shared/components/icon/src/lib/icon.component.ts

@@ -0,0 +1,54 @@
+import { ChangeDetectionStrategy, ChangeDetectorRef, Component, Input, OnChanges, OnDestroy, OnInit, SimpleChanges } from '@angular/core';
+import { IconRegistry } from './icon-registry';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+@Component({
+  selector: 'shared-icon',
+  template: `
+    <svg [style.width.rem]="size / 16" [style.height.rem]="size / 16" [attr.viewBox]="viewBox">
+      <path fill="currentColor" [attr.d]="data" />
+    </svg>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+})
+export class IconComponent implements OnInit, OnDestroy, OnChanges {
+  @Input()
+  icon: string;
+
+  data: string;
+
+  viewBox: string;
+
+  @Input()
+  size: number = 24;
+
+  private _onDestroy$ = new Subject<void>();
+
+  constructor(private readonly _iconRegistry: IconRegistry, private readonly _cdr: ChangeDetectorRef) {}
+
+  ngOnInit(): void {
+    this._iconRegistry.updated.pipe(takeUntil(this._onDestroy$)).subscribe(() => {
+      this.updateIcon();
+    });
+  }
+
+  ngOnDestroy(): void {
+    this._onDestroy$.next();
+    this._onDestroy$.complete();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.icon) {
+      this.updateIcon();
+    }
+  }
+
+  updateIcon(): void {
+    const icon = this._iconRegistry.get(this.icon);
+    this.data = icon?.data;
+    this.viewBox = icon?.viewBox;
+    this._cdr.markForCheck();
+  }
+}

apps/shared/components/icon/src/lib/icon.module.ts

@@ -0,0 +1,31 @@
+import { NgModule, Provider } from '@angular/core';
+import { IconComponent } from './icon.component';
+import { IconLoader, JsonIconLoader } from './loader';
+import { IconRegistry } from './icon-registry';
+
+export function provideIcon(loaderProvider?: Provider) {
+  const providers: Provider[] = [IconRegistry];
+  if (!loaderProvider) {
+    providers.push({
+      provide: IconLoader,
+      useClass: JsonIconLoader,
+    });
+  } else {
+    providers.push(loaderProvider);
+  }
+
+  return providers;
+}
+
+@NgModule({
+  imports: [IconComponent],
+  exports: [IconComponent],
+})
+export class IconModule {
+  static forRoot(loaderProvider?: Provider) {
+    return {
+      ngModule: IconModule,
+      providers: provideIcon(loaderProvider),
+    };
+  }
+}

apps/shared/components/icon/src/lib/interfaces.ts

@@ -0,0 +1,17 @@
+export interface IconConfig {
+  fallback?: string;
+  icons?: Icon[];
+  aliases?: IconAlias[];
+  viewBox: string;
+}
+
+export interface Icon {
+  name: string;
+  data: string;
+  viewBox?: string;
+}
+
+export interface IconAlias {
+  alias: string;
+  name: string;
+}

apps/shared/components/icon/src/lib/loader/icon-loader.ts

@@ -0,0 +1,8 @@
+import { Injectable } from '@angular/core';
+import { IconConfig } from '../interfaces';
+import { Observable } from 'rxjs';
+
+@Injectable()
+export abstract class IconLoader {
+  abstract getIcons(): Promise<IconConfig> | IconConfig | Observable<IconConfig>;
+}

apps/shared/components/icon/src/lib/loader/index.ts

@@ -0,0 +1,2 @@
+export * from './icon-loader';
+export * from './json.loader';

apps/shared/components/icon/src/lib/loader/json.loader.ts

@@ -0,0 +1,16 @@
+import { Injectable } from '@angular/core';
+import { IconLoader } from './icon-loader';
+import { Config } from '@core/config';
+import { HttpClient } from '@angular/common/http';
+import { IconConfig } from '../interfaces';
+
+@Injectable()
+export class JsonIconLoader extends IconLoader {
+  constructor(private readonly config: Config, private readonly http: HttpClient) {
+    super();
+  }
+
+  getIcons(): Promise<IconConfig> {
+    return this.http.get<IconConfig>(this.config.get('@shared/icon')).toPromise();
+  }
+}

apps/shared/components/icon/src/public-api.ts

@@ -0,0 +1,5 @@
+export * from './lib/icon-registry';
+export * from './lib/icon.component';
+export * from './lib/icon.module';
+export * from './lib/interfaces';
+export * from './lib/loader';

apps/shared/components/searchbox/src/lib/searchbox.component.html

@@ -12,7 +12,7 @@
     (keyup)="onKeyup($event)"
   />
   <button (click)="clear(); focus()" tabindex="-1" *ngIf="input.value" class="searchbox-clear-btn" type="button">
-    <ui-svg-icon icon="close" [size]="32"></ui-svg-icon>
+    <shared-icon icon="close" [size]="32"></shared-icon>
   </button>
   <ng-container *ngIf="!loading">
     <button
@@ -26,7 +26,7 @@
       <ui-icon icon="search" size="1.5rem"></ui-icon>
     </button>
     <button tabindex="0" class="searchbox-scan-btn" type="button" *ngIf="canScan" (click)="startScan()">
-      <ui-svg-icon icon="barcode-scan" [size]="32"></ui-svg-icon>
+      <shared-icon icon="barcode-scan" [size]="32"></shared-icon>
     </button>
   </ng-container>
   <div *ngIf="loading" class="searchbox-load-indicator">

apps/shared/components/searchbox/src/lib/searchbox.module.ts

@@ -4,9 +4,10 @@ import { CommonModule } from '@angular/common';
 import { SearchboxComponent } from './searchbox.component';
 import { UiIconModule } from '@ui/icon';
 import { FormsModule } from '@angular/forms';
+import { IconComponent } from '@shared/components/icon';
 
 @NgModule({
-  imports: [CommonModule, UiIconModule, FormsModule],
+  imports: [CommonModule, UiIconModule, IconComponent, FormsModule],
   exports: [SearchboxComponent],
   declarations: [SearchboxComponent],
 })

apps/shared/modals/purchase-options-modal/src/lib/purchase-options-list-item/purchase-options-list-item.component.html

@@ -10,7 +10,7 @@
       {{ product?.name }}
     </div>
     <div class="shared-purchase-options-list-item__format flex flex-row items-center">
-      <ui-svg-icon [icon]="product?.format"></ui-svg-icon>
+      <shared-icon [icon]="product?.format"></shared-icon>
       <span class="ml-2 font-bold">{{ product?.formatDetail }}</span>
     </div>
     <div class="shared-purchase-options-list-item__manufacturer-and-ean">
@@ -32,31 +32,31 @@
           [attr.data-option]="availability.purchaseOption"
         >
           <ng-container *ngSwitchCase="'delivery'">
-            <ui-svg-icon icon="isa-truck" [size]="22"></ui-svg-icon>
+            <shared-icon icon="isa-truck" [size]="22"></shared-icon>
             {{ availability.data.estimatedDelivery?.start | date: 'EE dd.MM.' }}
             -
             {{ availability.data.estimatedDelivery?.stop | date: 'EE dd.MM.' }}
           </ng-container>
           <ng-container *ngSwitchCase="'dig-delivery'">
-            <ui-svg-icon icon="isa-truck" [size]="22"></ui-svg-icon>
+            <shared-icon icon="isa-truck" [size]="22"></shared-icon>
             {{ availability.data.estimatedDelivery?.start | date: 'EE dd.MM.' }}
             -
             {{ availability.data.estimatedDelivery?.stop | date: 'EE dd.MM.' }}
           </ng-container>
           <ng-container *ngSwitchCase="'b2b-delivery'">
-            <ui-svg-icon icon="isa-b2b-truck" [size]="24"></ui-svg-icon>
+            <shared-icon icon="isa-b2b-truck" [size]="24"></shared-icon>
             {{ availability.data.estimatedShippingDate | date: 'dd. MMMM yyyy' }}
           </ng-container>
           <ng-container *ngSwitchCase="'pickup'">
-            <ui-svg-icon icon="isa-box-out" [size]="18"></ui-svg-icon>
+            <shared-icon icon="isa-box-out" [size]="18"></shared-icon>
             {{ availability.data.estimatedShippingDate | date: 'dd. MMMM yyyy' }}
           </ng-container>
           <ng-container *ngSwitchCase="'in-store'">
-            <ui-svg-icon icon="isa-shopping-bag" [size]="18"></ui-svg-icon>
+            <shared-icon icon="isa-shopping-bag" [size]="18"></shared-icon>
             {{ availability.data.inStock }}x ab sofort
           </ng-container>
           <ng-container *ngSwitchCase="'download'">
-            <ui-svg-icon icon="isa-download" [size]="22"></ui-svg-icon>
+            <shared-icon icon="isa-download" [size]="22"></shared-icon>
             Download
           </ng-container>
         </div>
@@ -84,7 +84,7 @@
 
           <shared-input-control [class.ml-8]="manualPriceFormControl?.invalid && manualPriceFormControl?.dirty">
             <shared-input-control-indicator>
-              <ui-svg-icon *ngIf="manualPriceFormControl?.invalid && manualPriceFormControl?.dirty" icon="mat-info"></ui-svg-icon>
+              <shared-icon *ngIf="manualPriceFormControl?.invalid && manualPriceFormControl?.dirty" icon="mat-info"></shared-icon>
             </shared-input-control-indicator>
             <input
               triggerOn="init"
@@ -109,7 +109,7 @@
       <div class="relative flex flex-col">
         <shared-input-control>
           <shared-input-control-indicator>
-            <ui-svg-icon *ngIf="priceFormControl?.invalid && priceFormControl?.dirty" icon="mat-info"></ui-svg-icon>
+            <shared-icon *ngIf="priceFormControl?.invalid && priceFormControl?.dirty" icon="mat-info"></shared-icon>
           </shared-input-control-indicator>
           <input
             [uiOverlayTrigger]="tooltip"

apps/shared/modals/purchase-options-modal/src/lib/purchase-options-list-item/purchase-options-list-item.component.ts

@@ -16,7 +16,6 @@ import { ProductImageModule } from '@cdn/product-image';
 import { InputControlModule } from '@shared/components/input-control';
 import { ElementLifecycleModule } from '@shared/directives/element-lifecycle';
 import { UiCommonModule } from '@ui/common';
-import { UiIconModule } from '@ui/icon';
 import { UiQuantityDropdownModule } from '@ui/quantity-dropdown';
 import { UiSpinnerModule } from '@ui/spinner';
 import { UiTooltipModule } from '@ui/tooltip';
@@ -26,6 +25,7 @@ import { GIFT_CARD_MAX_PRICE, PRICE_PATTERN } from '../constants';
 import { Item, PurchaseOptionsStore } from '../store';
 import { UiSelectModule } from '@ui/select';
 import { KeyValueDTOOfStringAndString } from '@swagger/cat';
+import { IconComponent } from '@shared/components/icon';
 
 @Component({
   selector: 'scale-content, [scaleContent]',
@@ -82,7 +82,7 @@ export class ScaleContentComponent implements AfterContentInit {
     UiQuantityDropdownModule,
     UiSelectModule,
     ProductImageModule,
-    UiIconModule,
+    IconComponent,
     UiSpinnerModule,
     ReactiveFormsModule,
     InputControlModule,

apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/delivery-purchase-options-tile.component.html

@@ -1,6 +1,6 @@
 <div class="purchase-options-tile__heading">
   <div class="icon-wrapper">
-    <ui-svg-icon icon="isa-truck"></ui-svg-icon>
+    <shared-icon icon="isa-truck"></shared-icon>
   </div>
   <span class="purchase-option-name">Versand</span>
 </div>

apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/delivery-purchase-options-tile.component.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
-import { UiIconModule } from '@ui/icon';
 import { PurchaseOptionsStore } from '../store';
 import { BasePurchaseOptionDirective } from './base-purchase-option.directive';
+import { IconComponent } from '@shared/components/icon';
 
 @Component({
   selector: 'app-delivery-purchase-options-tile',
@@ -10,7 +10,7 @@ import { BasePurchaseOptionDirective } from './base-purchase-option.directive';
   styleUrls: ['purchase-options-tile.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, UiIconModule],
+  imports: [CommonModule, IconComponent],
 })
 export class DeliveryPurchaseOptionTileComponent extends BasePurchaseOptionDirective {
   constructor(protected store: PurchaseOptionsStore, protected cdr: ChangeDetectorRef) {

apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/download-purchase-options-tile.component.html

@@ -1,6 +1,6 @@
 <div class="purchase-options-tile__heading">
   <div class="icon-wrapper">
-    <ui-svg-icon icon="isa-download"></ui-svg-icon>
+    <shared-icon icon="isa-download"></shared-icon>
   </div>
   <span class="purchase-option-name">Download</span>
 </div>

apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/download-purchase-options-tile.component.ts

@@ -1,8 +1,8 @@
 import { CommonModule } from '@angular/common';
 import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core';
-import { UiIconModule } from '@ui/icon';
 import { PurchaseOptionsStore } from '../store';
 import { BasePurchaseOptionDirective } from './base-purchase-option.directive';
+import { IconComponent } from '@shared/components/icon';
 
 @Component({
   selector: 'app-download-purchase-options-tile',
@@ -10,7 +10,7 @@ import { BasePurchaseOptionDirective } from './base-purchase-option.directive';
   styleUrls: ['purchase-options-tile.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, UiIconModule],
+  imports: [CommonModule, IconComponent],
 })
 export class DownloadPurchaseOptionTileComponent extends BasePurchaseOptionDirective {
   constructor(protected store: PurchaseOptionsStore, protected cdr: ChangeDetectorRef) {

apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/in-store-purchase-options-tile.component.html

@@ -1,6 +1,6 @@
 <div class="purchase-options-tile__heading">
   <div class="icon-wrapper">
-    <ui-svg-icon icon="isa-shopping-bag"></ui-svg-icon>
+    <shared-icon icon="isa-shopping-bag"></shared-icon>
   </div>
   <span class="purchase-option-name">Rücklage</span>
 </div>
@@ -11,7 +11,7 @@
   <button type="button" class="w-[176px] flex flex-row items-center justify-between" (click)="sharedBranchSelector.focus()">
     <span class="grow text-left truncate">{{ inStoreBranch$ | async | branchName }}</span>
     <span class="transition-all group-focus-within:rotate-180">
-      <ui-svg-icon icon="menu-down"></ui-svg-icon>
+      <shared-icon icon="menu-down"></shared-icon>
     </span>
   </button>
   <shared-branch-selector

apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/in-store-purchase-options-tile.component.ts

@@ -4,10 +4,10 @@ import { FormsModule } from '@angular/forms';
 import { BranchSelectorComponent } from '@shared/components/branch-selector';
 import { BranchNamePipe } from '@shared/pipes/branch';
 import { BranchDTO } from '@swagger/checkout';
-import { UiIconModule } from '@ui/icon';
 import { PurchaseOptionsStore } from '../store';
 import { BasePurchaseOptionDirective } from './base-purchase-option.directive';
 import { AuthService } from '@core/auth';
+import { IconComponent } from '@shared/components/icon';
 
 @Component({
   selector: 'app-in-store-purchase-options-tile',
@@ -15,7 +15,7 @@ import { AuthService } from '@core/auth';
   styleUrls: ['purchase-options-tile.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, UiIconModule, BranchSelectorComponent, FormsModule, BranchNamePipe],
+  imports: [CommonModule, IconComponent, BranchSelectorComponent, FormsModule, BranchNamePipe],
   host: { tabindex: '-1' },
 })
 export class InStorePurchaseOptionTileComponent extends BasePurchaseOptionDirective {

apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/pickup-purchase-options-tile.component.html

@@ -1,6 +1,6 @@
 <div class="purchase-options-tile__heading">
   <div class="icon-wrapper">
-    <ui-svg-icon icon="isa-box-out"></ui-svg-icon>
+    <shared-icon icon="isa-box-out"></shared-icon>
   </div>
   <span class="purchase-option-name">Abholung</span>
 </div>
@@ -11,7 +11,7 @@
   <button type="button" class="w-[176px] flex flex-row items-center justify-between" (click)="sharedBranchSelector.focus()">
     <span class="grow text-left truncate">{{ pickupBranch$ | async | branchName }}</span>
     <span class="transition-all group-focus-within:rotate-180">
-      <ui-svg-icon icon="menu-down"></ui-svg-icon>
+      <shared-icon icon="menu-down"></shared-icon>
     </span>
   </button>
   <shared-branch-selector

apps/shared/modals/purchase-options-modal/src/lib/purchase-options-tile/pickup-purchase-options-tile.component.ts

@@ -4,10 +4,10 @@ import { FormsModule } from '@angular/forms';
 import { BranchSelectorComponent } from '@shared/components/branch-selector';
 import { BranchNamePipe } from '@shared/pipes/branch';
 import { BranchDTO } from '@swagger/checkout';
-import { UiIconModule } from '@ui/icon';
 import { PurchaseOptionsStore } from '../store';
 import { BasePurchaseOptionDirective } from './base-purchase-option.directive';
 import { AuthService } from '@core/auth';
+import { IconComponent } from '@shared/components/icon';
 
 @Component({
   selector: 'app-pickup-purchase-options-tile',
@@ -15,7 +15,7 @@ import { AuthService } from '@core/auth';
   styleUrls: ['purchase-options-tile.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, UiIconModule, BranchSelectorComponent, FormsModule, BranchNamePipe],
+  imports: [CommonModule, IconComponent, BranchSelectorComponent, FormsModule, BranchNamePipe],
   host: { tabindex: '-1' },
 })
 export class PickupPurchaseOptionTileComponent extends BasePurchaseOptionDirective {

apps/shared/shell/src/lib/process-bar/process-bar-item/process-bar-item.component.html

@@ -18,11 +18,11 @@
       [routerLink]="['/kunde', (process$ | async)?.id, 'cart', 'review']"
       (click)="$event?.preventDefault(); $event?.stopPropagation()"
     >
-      <ui-svg-icon icon="shopping-cart-bold" [size]="22"></ui-svg-icon>
+      <shared-icon icon="shopping-cart-bold" [size]="22"></shared-icon>
       <span class="shopping-cart-count-label ml-2">{{ cartItemCount$ | async }}</span>
     </button>
   </a>
   <button type="button" class="tab-close-btn -ml-4 h-12 w-12 grid justify-center items-center" (click)="close()">
-    <ui-svg-icon icon="close" [size]="28"></ui-svg-icon>
+    <shared-icon icon="close" [size]="28"></shared-icon>
   </button>
 </div>

apps/shared/shell/src/lib/process-bar/process-bar.component.html

@@ -57,14 +57,14 @@
       [class.border-[#AEB7C1]]="!(processes$ | async)?.length"
     >
       <span class="mr-1">{{ (processes$ | async)?.length }}</span>
-      <ui-svg-icon icon="close"></ui-svg-icon>
+      <shared-icon icon="close"></shared-icon>
     </div>
   </button>
 </div>
 
 <ng-template #createProcessButtonContent>
   <div class="bg-brand text-white w-[2.375rem] h-[2.375rem] rounded-full grid items-center justify-center mx-auto mb-1">
-    <ui-svg-icon icon="add"></ui-svg-icon>
+    <shared-icon icon="add"></shared-icon>
   </div>
   <span class="text-brand create-process-btn-text" *ngIf="showStartProcessText$ | async">Vorgang starten</span>
 </ng-template>

apps/shared/shell/src/lib/process-bar/process-bar.module.ts

@@ -7,9 +7,10 @@ import { ShellProcessBarItemComponent } from './process-bar-item/process-bar-ite
 import { RouterModule } from '@angular/router';
 import { CdkMenuModule } from '@angular/cdk/menu';
 import { AuthModule } from '@core/auth';
+import { IconModule } from '@shared/components/icon';
 
 @NgModule({
-  imports: [CommonModule, UiIconModule, RouterModule, CdkMenuModule, AuthModule],
+  imports: [CommonModule, UiIconModule, IconModule, RouterModule, CdkMenuModule, AuthModule],
   exports: [ShellProcessBarComponent],
   declarations: [ShellProcessBarComponent, ShellProcessBarItemComponent],
 })

apps/shared/shell/src/lib/side-menu/side-menu.component.html

@@ -10,7 +10,7 @@
       routerLinkActive="active"
     >
       <div class="side-menu-group-item-icon">
-        <ui-svg-icon icon="import-contacts"></ui-svg-icon>
+        <shared-icon icon="import-contacts"></shared-icon>
       </div>
       <span class="side-menu-group-item-label">Artikelsuche</span>
     </a>
@@ -23,7 +23,7 @@
         routerLinkActive="active"
       >
         <span class="side-menu-group-item-icon">
-          <ui-svg-icon icon="person"></ui-svg-icon>
+          <shared-icon icon="person"></shared-icon>
         </span>
         <span class="side-menu-group-item-label">
           Kunden
@@ -33,7 +33,7 @@
           [class.side-menu-item-rotate]="customerExpanded"
           (click)="$event.stopPropagation(); $event.preventDefault(); customerExpanded = !customerExpanded"
         >
-          <ui-svg-icon icon="keyboard-arrow-down"></ui-svg-icon>
+          <shared-icon icon="keyboard-arrow-down"></shared-icon>
         </button>
       </a>
 
@@ -71,7 +71,7 @@
       routerLinkActive="active"
     >
       <span class="side-menu-group-item-icon">
-        <ui-svg-icon icon="unarchive"></ui-svg-icon>
+        <shared-icon icon="unarchive"></shared-icon>
       </span>
       <span class="side-menu-group-item-label">
         Warenausgabe
@@ -86,7 +86,7 @@
       routerLinkActive="active"
     >
       <span class="side-menu-group-item-icon">
-        <ui-svg-icon icon="deployed-code"></ui-svg-icon>
+        <shared-icon icon="deployed-code"></shared-icon>
       </span>
       <span class="side-menu-group-item-label">
         Bestellungen
@@ -109,7 +109,7 @@
       routerLinkActive="active"
     >
       <span class="side-menu-group-item-icon">
-        <ui-svg-icon icon="event-available"></ui-svg-icon>
+        <shared-icon icon="event-available"></shared-icon>
       </span>
       <span class="side-menu-group-item-label">
         Kalender
@@ -124,7 +124,7 @@
       routerLinkActive="active"
     >
       <span class="side-menu-group-item-icon">
-        <ui-svg-icon icon="shape-outline"></ui-svg-icon>
+        <shared-icon icon="shape-outline"></shared-icon>
       </span>
       <span class="side-menu-group-item-label">
         Sortiment
@@ -141,7 +141,7 @@
         routerLinkActive="active"
       >
         <span class="side-menu-group-item-icon">
-          <ui-svg-icon icon="isa-abholfach"></ui-svg-icon>
+          <shared-icon icon="isa-abholfach"></shared-icon>
         </span>
         <span class="side-menu-group-item-label">
           Abholfach
@@ -151,7 +151,7 @@
           [class.side-menu-item-rotate]="goodsInExpanded"
           (click)="$event.stopPropagation(); $event.preventDefault(); goodsInExpanded = !goodsInExpanded"
         >
-          <ui-svg-icon icon="keyboard-arrow-down"></ui-svg-icon>
+          <shared-icon icon="keyboard-arrow-down"></shared-icon>
         </button>
       </a>
 
@@ -223,7 +223,7 @@
       routerLinkActive="active"
     >
       <span class="side-menu-group-item-icon">
-        <ui-svg-icon icon="assignment-return"></ui-svg-icon>
+        <shared-icon icon="assignment-return"></shared-icon>
       </span>
       <span class="side-menu-group-item-label">
         Remission
@@ -239,7 +239,7 @@
       routerLinkActive="active"
     >
       <span class="side-menu-group-item-icon">
-        <ui-svg-icon icon="clipboard-check-outline"></ui-svg-icon>
+        <shared-icon icon="clipboard-check-outline"></shared-icon>
       </span>
       <span class="side-menu-group-item-label">
         Wareneingang

apps/shared/shell/src/lib/side-menu/side-menu.component.ts

@@ -9,9 +9,9 @@ import { WrongDestinationModalService } from '@shared/modals/wrong-destination-m
 import { EnvironmentService } from '@core/environment';
 import { ProductCatalogNavigationService } from '@shared/services';
 import { CommonModule, DOCUMENT } from '@angular/common';
-import { UiIconModule } from '@ui/icon';
 import { Config } from '@core/config';
 import { BreadcrumbService } from '@core/breadcrumb';
+import { IconComponent } from '@shared/components/icon';
 
 @Component({
   selector: 'shell-side-menu',
@@ -19,7 +19,7 @@ import { BreadcrumbService } from '@core/breadcrumb';
   styleUrls: ['side-menu.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, UiIconModule, RouterModule, AuthModule],
+  imports: [CommonModule, IconComponent, RouterModule, AuthModule],
 })
 export class ShellSideMenuComponent {
   branchKey$ = this._stockService.StockCurrentBranch().pipe(

apps/shared/shell/src/lib/top-bar/top-bar.component.html

@@ -1,23 +1,23 @@
 <header class="bg-surface text-surface-content h-[4.625rem] flex flex-row items-center justify-start px-[0.938rem]">
   <button (click)="toggleSideMenu()" class="btn btn-icon mr-4 desktop-small:hidden">
-    <ui-svg-icon [icon]="menuIcon$ | async"></ui-svg-icon>
+    <shared-icon [icon]="menuIcon$ | async"></shared-icon>
   </button>
   <span class="text-[1.625rem] leading-[2.25rem] font-bold" *ngIf="title$ | async; let title">
     {{ title }}
   </span>
   <div class="grow"></div>
 
-  <a class="btn btn-white" [routerLink]="['/kunde/dashboard']"> <ui-svg-icon icon="dashboard"></ui-svg-icon> Dashboard </a>
+  <a class="btn btn-white" [routerLink]="['/kunde/dashboard']"> <shared-icon icon="dashboard"></shared-icon> Dashboard </a>
 
   <button type="button" class="btn btn-white" (click)="logout()">
-    <ui-svg-icon icon="logout"></ui-svg-icon>
+    <shared-icon icon="logout"></shared-icon>
     <strong>{{ branchKey$ | async }}</strong>
   </button>
 
   <div class="w-4"></div>
 
   <button class="btn btn-icon btn-light relative" [disabled]="(notificationCount$ | async) === 0" (click)="openNotifications()">
-    <ui-svg-icon icon="notifications"></ui-svg-icon>
+    <shared-icon icon="notifications"></shared-icon>
     <div class="grid absolute -top-2 -right-2 bg-brand text-white rounded-full w-6 h-6" *ngIf="notificationCount$ | async; let count">
       <span class="place-self-center text-xs font-bold">{{ count }}</span>
     </div>

apps/shared/shell/src/lib/top-bar/top-bar.module.ts

@@ -2,12 +2,12 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { ShellTopBarComponent } from './top-bar.component';
-import { UiIconModule } from '@ui/icon';
 import { AuthModule } from '@core/auth';
 import { RouterModule } from '@angular/router';
+import { IconModule } from '@shared/components/icon';
 
 @NgModule({
-  imports: [CommonModule, UiIconModule, AuthModule, RouterModule],
+  imports: [CommonModule, IconModule, AuthModule, RouterModule],
   exports: [ShellTopBarComponent],
   declarations: [ShellTopBarComponent],
 })

apps/ui/checkbox/src/lib/checkbox.component.html

@@ -1,8 +1,8 @@
 <ui-icon *ngIf="showCheckbox && !indeterminate" size="20px" [icon]="icon"></ui-icon>
-<ui-svg-icon
+<shared-icon
   *ngIf="indeterminate"
   [size]="16"
   icon="mat-remove"
   class="border-2 border-solid border-active-customer rounded text-active-customer"
-></ui-svg-icon>
+></shared-icon>
 <ng-content></ng-content>

apps/ui/checkbox/src/lib/checkbox.module.ts

@@ -3,10 +3,11 @@ import { NgModule } from '@angular/core';
 import { UiIconModule } from '@ui/icon';
 import { UiCheckboxComponent } from './checkbox.component';
 import { UiCheckboxGroupComponent } from './checkbox-group.component';
+import { IconModule } from '@shared/components/icon';
 
 @NgModule({
   declarations: [UiCheckboxComponent, UiCheckboxGroupComponent],
-  imports: [CommonModule, UiIconModule],
+  imports: [CommonModule, UiIconModule, IconModule],
   exports: [UiCheckboxComponent, UiCheckboxGroupComponent],
 })
 export class UiCheckboxModule {}

apps/ui/searchbox/src/lib/next/searchbox.component.html

@@ -23,7 +23,7 @@
       <ui-icon icon="search" size="28px"></ui-icon>
     </button>
     <button tabindex="0" class="search-button scan" *ngIf="canScan" (click)="startScan()">
-      <ui-svg-icon icon="barcode-scan" [size]="32"></ui-svg-icon>
+      <shared-icon icon="barcode-scan" [size]="32"></shared-icon>
     </button>
   </ng-container>
 

apps/ui/searchbox/src/lib/next/searchbox.component.scss

@@ -28,7 +28,7 @@
     &.scan {
       @apply bg-brand;
 
-      ui-svg-icon {
+      shared-icon {
         @apply text-white;
       }
     }

apps/ui/searchbox/src/lib/next/searchbox.module.ts

@@ -2,11 +2,12 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
 import { UiSearchboxNextComponent } from './searchbox.component';
-import { UiIconModule } from '@ui/icon';
 import { FormsModule } from '@angular/forms';
+import { IconModule } from '@shared/components/icon';
+import { UiIconModule } from '@ui/icon';
 
 @NgModule({
-  imports: [CommonModule, UiIconModule, FormsModule],
+  imports: [CommonModule, UiIconModule, IconModule, FormsModule],
   exports: [UiSearchboxNextComponent],
   declarations: [UiSearchboxNextComponent],
 })

tailwind.config.js

@@ -169,7 +169,6 @@ module.exports = {
         card: '0px -2px 24px 0px rgba(220, 226, 233, 0.8)',
         cta: '0px 0px 15px 0px rgba(0, 0, 0, 0.5)',
         action: '0 0 20px 0 #596470',
-        s: '0px 6px 24px rgba(206, 212, 219, 0.8)',
       },
       borderRadius: {
         DEFAULT: '0.3125rem',
@@ -191,6 +190,4 @@ module.exports = {
     require('./tailwind-plugins/section.plugin.js'),
     require('./tailwind-plugins/typography.plugin.js'),
   ],
-  safelist: [{ pattern: /par-.*/ }],
-  presets: [require('./paragon-preset.js')],
 };