Switching to the new Android and iOS icons.

Author: renemadsen

eform-client/src/app/plugins/modules/time-planning-pn/components/plannings/time-plannings-table/time-plannings-table.component.html

@@ -58,12 +58,12 @@
             <div>
               <ng-container *ngIf="row['deviceManufacturer'] === 'iOS' ">
                 <span [matTooltip]="row['deviceModel']" class="device-icon">
-                  <mat-icon>phone_iphone</mat-icon>
+                  <mat-icon svgIcon="ios-icon"></mat-icon>
                 </span>
               </ng-container>
               <ng-container *ngIf="row['deviceManufacturer'] !== 'iOS' ">
                 <span [matTooltip]="row['deviceModel']" class="device-icon">
-                  <mat-icon>android</mat-icon>
+                  <mat-icon svgIcon="android-icon"></mat-icon>
                 </span>
               </ng-container>
               {{row['softwareVersion']}}
@@ -119,12 +119,12 @@
             <div>
               <ng-container *ngIf="row['deviceManufacturer'] === 'iOS' ">
                 <span [matTooltip]="row['deviceModel']" class="device-icon">
-                  <mat-icon>phone_iphone</mat-icon>
+                  <mat-icon svgIcon="ios-icon"></mat-icon>
                 </span>
               </ng-container>
               <ng-container *ngIf="row['deviceManufacturer'] !== 'iOS' ">
                 <span [matTooltip]="row['deviceModel']" class="device-icon">
-                  <mat-icon>android</mat-icon>
+                  <mat-icon svgIcon="android-icon"></mat-icon>
                 </span>
               </ng-container>
               {{row['softwareVersion']}}

eform-client/src/app/plugins/modules/time-planning-pn/components/plannings/time-plannings-table/time-plannings-table.component.ts

@@ -14,6 +14,9 @@ import * as R from 'ramda';
 import {TimePlanningMessagesEnum} from '../../../enums';
 import {Store} from "@ngrx/store";
 import {selectAuthIsAdmin, selectCurrentUserIsFirstUser} from "src/app/state";
+import {AndroidIcon, iOSIcon} from "src/app/common/const";
+import {MatIconRegistry} from "@angular/material/icon";
+import {DomSanitizer} from "@angular/platform-browser";
 
 @Component({
   selector: 'app-time-plannings-table',
@@ -31,6 +34,8 @@ export class TimePlanningsTableComponent implements OnInit, OnChanges {
   private translateService = inject(TranslateService);
   protected datePipe = inject(DatePipe);
   private cdr = inject(ChangeDetectorRef);
+  private iconRegistry = inject(MatIconRegistry);
+  private sanitizer = inject(DomSanitizer);
 
   @Input() timePlannings: TimePlanningModel[] = [];
   @Input() dateFrom!: Date;
@@ -47,9 +52,9 @@ export class TimePlanningsTableComponent implements OnInit, OnChanges {
   protected selectAuthIsAdmin$ = this.store.select(selectAuthIsAdmin);
   public selectCurrentUserIsFirstUser$ = this.store.select(selectCurrentUserIsFirstUser);
 
-  
-
   ngOnInit(): void {
+    this.iconRegistry.addSvgIconLiteral('android-icon', this.sanitizer.bypassSecurityTrustHtml(AndroidIcon));
+    this.iconRegistry.addSvgIconLiteral('ios-icon', this.sanitizer.bypassSecurityTrustHtml(iOSIcon));
     this.enumKeys = Object.keys(TimePlanningMessagesEnum).filter(key => isNaN(Number(key)));
     this.updateTableHeaders();
     this.translateService.onLangChange.subscribe((lang) => {