feat: replace our icon library @mdi/angular-material with the Google …

…Font - Material Symbol (#1664) * feat(common): icon add provider to register icon class for symbol BREAKING CHANGE - Breaking change: The CoreModule doesn't instantiate the icon anymore. We need to explicitly call the provideIcon() in our main file
infra-geo-ouverte · Apr 9, 2024 · f74c495 · f74c495
1 parent 06ed562
commit f74c495
Show file tree

Hide file tree

Showing 152 changed files with 735 additions and 476 deletions.
diff --git a/packages/auth/microsoft/src/auth-microsoft/auth-microsoft.component.html b/packages/auth/microsoft/src/auth-microsoft/auth-microsoft.component.html
@@ -3,6 +3,6 @@
   mat-raised-button
   (click)="loginMicrosoft()"
 >
-  <mat-icon svgIcon="microsoft"></mat-icon>
+  <igo-icon [icon]="svgIcon"></igo-icon>
   {{ 'igo.auth.microsoft.login' | translate }}
 </button>
diff --git a/packages/auth/microsoft/src/auth-microsoft/auth-microsoft.component.ts b/packages/auth/microsoft/src/auth-microsoft/auth-microsoft.component.ts
@@ -7,9 +7,9 @@ import {
   Output
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
 
 import { AuthService } from '@igo2/auth';
+import { IconSvg, IgoIconComponent, MICROSOFT_ICON } from '@igo2/common';
 import { ConfigService } from '@igo2/core/config';
 
 import {
@@ -40,14 +40,16 @@ import {
   styleUrls: ['./auth-microsoft.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [MatButtonModule, MatIconModule, TranslateModule]
+  imports: [MatButtonModule, TranslateModule, IgoIconComponent]
 })
 export class AuthMicrosoftComponent {
   private options?: AuthMicrosoftOptions;
   private readonly _destroying$ = new Subject<void>();
   @Output() login: EventEmitter<boolean> = new EventEmitter<boolean>();
   private broadcastService: MsalBroadcastService;
 
+  svgIcon: IconSvg = MICROSOFT_ICON;
+
   constructor(
     private authService: AuthService,
     private config: ConfigService,

diff --git a/packages/auth/microsoft/src/auth-microsoftb2c/auth-microsoftb2c.component.html b/packages/auth/microsoft/src/auth-microsoftb2c/auth-microsoftb2c.component.html
@@ -3,6 +3,6 @@
   mat-raised-button
   (click)="loginMicrosoftb2c()"
 >
-  <mat-icon svgIcon="microsoft"></mat-icon>
+  <igo-icon [icon]="svgIcon"></igo-icon>
   {{ 'igo.auth.microsoftb2c.login' | translate }}
 </button>
diff --git a/packages/auth/microsoft/src/auth-microsoftb2c/auth-microsoftb2c.component.ts b/packages/auth/microsoft/src/auth-microsoftb2c/auth-microsoftb2c.component.ts
@@ -7,9 +7,9 @@ import {
   Output
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
 
 import { AuthService } from '@igo2/auth';
+import { IconSvg, IgoIconComponent, MICROSOFT_ICON } from '@igo2/common';
 import { ConfigService } from '@igo2/core/config';
 
 import { MSAL_GUARD_CONFIG } from '@azure/msal-angular';
@@ -38,7 +38,7 @@ import { MsalServiceb2c } from './auth-msalServiceb2c.service';
   styleUrls: ['./auth-microsoftb2c.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [MatButtonModule, MatIconModule, TranslateModule],
+  imports: [MatButtonModule, TranslateModule, IgoIconComponent],
   providers: [MsalServiceb2c]
 })
 export class AuthMicrosoftb2cComponent {
@@ -47,6 +47,8 @@ export class AuthMicrosoftb2cComponent {
   @Output() login: EventEmitter<boolean> = new EventEmitter<boolean>();
   private broadcastService: MsalBroadcastServiceb2c;
 
+  svgIcon: IconSvg = MICROSOFT_ICON;
+
   constructor(
     private authService: AuthService,
     private config: ConfigService,

diff --git a/packages/auth/package.json b/packages/auth/package.json
@@ -63,6 +63,7 @@
     "@angular/router": "^17.0.6",
     "@azure/msal-angular": "^3.0.4",
     "@azure/msal-browser": "^3.0.4",
+    "@igo2/common": "*",
     "@igo2/core": "*",
     "@igo2/utils": "*",
     "rxjs": "^7.8.0"

diff --git a/packages/common/src/lib/action/actionbar/actionbar-item.component.html b/packages/common/src/lib/action/actionbar/actionbar-item.component.html
@@ -15,7 +15,9 @@
     [disabled]="disabled$ | async"
     [disableRipple]="true"
   >
-    <mat-icon *ngIf="withIcon" svgIcon="{{ icon$ | async }}"></mat-icon>
+    <igo-icon
+      [icon]="isObservable(action.icon) ? (action.icon | async) : action.icon"
+    ></igo-icon>
   </button>
   <span *ngIf="withTitle" matLine>{{ title | translate }}</span>
 </mat-list-item>

diff --git a/packages/common/src/lib/action/actionbar/actionbar-item.component.ts b/packages/common/src/lib/action/actionbar/actionbar-item.component.ts
@@ -17,6 +17,7 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslateModule } from '@ngx-translate/core';
 import { BehaviorSubject, Subscription, isObservable } from 'rxjs';
 
+import { IgoIconComponent } from '../../icons';
 import { Action } from '../shared/action.interfaces';
 
 /**
@@ -37,7 +38,8 @@ import { Action } from '../shared/action.interfaces';
     MatIconModule,
     MatCheckboxModule,
     AsyncPipe,
-    TranslateModule
+    TranslateModule,
+    IgoIconComponent
   ]
 })
 export class ActionbarItemComponent implements OnInit, OnDestroy {
@@ -47,8 +49,6 @@ export class ActionbarItemComponent implements OnInit, OnDestroy {
     undefined
   );
 
-  readonly icon$: BehaviorSubject<string> = new BehaviorSubject(undefined);
-
   readonly tooltip$: BehaviorSubject<string> = new BehaviorSubject(undefined);
 
   readonly noDisplay$: BehaviorSubject<boolean> = new BehaviorSubject(false);
@@ -62,8 +62,6 @@ export class ActionbarItemComponent implements OnInit, OnDestroy {
 
   private availability$$: Subscription;
 
-  private icon$$: Subscription;
-
   private checkCondition$$: Subscription;
 
   private tooltip$$: Subscription;
@@ -72,6 +70,8 @@ export class ActionbarItemComponent implements OnInit, OnDestroy {
 
   private display$$: Subscription;
 
+  isObservable = isObservable;
+
   /**
    * Action
    */
@@ -131,8 +131,6 @@ export class ActionbarItemComponent implements OnInit, OnDestroy {
     return this.action.title;
   }
 
-  constructor() {}
-
   ngOnInit() {
     const args = this.action.args || [];
 
@@ -144,14 +142,6 @@ export class ActionbarItemComponent implements OnInit, OnDestroy {
         );
     }
 
-    if (isObservable(this.action.icon)) {
-      this.icon$$ = this.action.icon.subscribe((icon: string) =>
-        this.updateIcon(icon)
-      );
-    } else {
-      this.updateIcon(this.action.icon);
-    }
-
     if (isObservable(this.action.checkCondition)) {
       this.checkCondition$$ = this.action.checkCondition.subscribe(
         (checkCondition: boolean) => this.updateCheckCondition(checkCondition)
@@ -210,11 +200,6 @@ export class ActionbarItemComponent implements OnInit, OnDestroy {
       this.checkCondition$$ = undefined;
     }
 
-    if (this.icon$$ !== undefined) {
-      this.icon$$.unsubscribe();
-      this.icon$$ = undefined;
-    }
-
     if (this.tooltip$$ !== undefined) {
       this.tooltip$$.unsubscribe();
       this.tooltip$$ = undefined;
@@ -247,8 +232,4 @@ export class ActionbarItemComponent implements OnInit, OnDestroy {
   private updateCheckCondition(checkCondition: boolean) {
     this.checkCondition$.next(checkCondition);
   }
-
-  private updateIcon(icon: string) {
-    this.icon$.next(icon);
-  }
 }
diff --git a/packages/common/src/lib/action/actionbar/actionbar.component.html b/packages/common/src/lib/action/actionbar/actionbar.component.html
@@ -9,7 +9,7 @@
     [matTooltip]="'igo.common.actionbar.scrollUp' | translate"
     (click)="scrollUp()"
   >
-    <mat-icon svgIcon="chevron-up"></mat-icon>
+    <mat-icon>expand_less</mat-icon>
   </button>
 </div>
 <mat-list *ngIf="mode === actionbarMode.Dock" matListItemIcon>
@@ -57,7 +57,7 @@
     [matTooltip]="'igo.common.actionbar.scrollDown' | translate"
     (click)="scrollDown()"
   >
-    <mat-icon svgIcon="chevron-down"></mat-icon>
+    <mat-icon>expand_more</mat-icon>
   </button>
 </div>
 
@@ -72,7 +72,7 @@
     [disabled]="store.view.empty"
     [color]="iconColor"
   >
-    <mat-icon [svgIcon]="icon"></mat-icon>
+    <mat-icon>{{ icon }}</mat-icon>
   </button>
 
   <mat-menu

diff --git a/packages/common/src/lib/action/actionbar/actionbar.component.ts b/packages/common/src/lib/action/actionbar/actionbar.component.ts
@@ -76,7 +76,7 @@ export class ActionbarComponent implements OnDestroy, OnChanges {
    */
   toggleCollapseAction = {
     id: 'actionbar_toggle',
-    icon: 'dots-vertical',
+    icon: 'more_vert',
     handler: () => {
       this.collapsed = !this.collapsed;
     }
@@ -160,7 +160,7 @@ export class ActionbarComponent implements OnDestroy, OnChanges {
   /**
    * Which icon want to be shown
    */
-  @Input() icon = 'dots-horizontal';
+  @Input() icon = 'more_horiz';
 
   /**
    * Overlay X position

diff --git a/packages/common/src/lib/action/shared/action.interfaces.ts b/packages/common/src/lib/action/shared/action.interfaces.ts
@@ -1,10 +1,12 @@
 import { Observable } from 'rxjs';
 
+import { IconSvg } from '../../icons';
+
 export interface Action {
   id: string;
   handler: ActionHandler;
   title?: string;
-  icon?: string | Observable<string>;
+  icon?: string | IconSvg | Observable<string>;
   tooltip?: string | Observable<string>;
   args?: any[];
   checkbox?: boolean;

diff --git a/packages/common/src/lib/badge-icon/badge-icon.directive.ts b/packages/common/src/lib/badge-icon/badge-icon.directive.ts
@@ -1,5 +1,5 @@
 import { Directive, ElementRef, Input, OnInit } from '@angular/core';
-import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
+import { MatIconModule } from '@angular/material/icon';
 
 /**
  * This directive allow to add an icon inside a matBadge.
@@ -14,12 +14,12 @@ import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
 export class IgoBadgeIconDirective implements OnInit {
   @Input()
   set igoMatBadgeIcon(value: string) {
-    this.matIconRegistry.getNamedSvgIcon(value).subscribe((svgObj) => {
-      this.svg = svgObj;
-      this.updateSvg();
-    });
+    this.html = `
+      <mat-icon class="mat-icon material-symbols-outlined" style="height: 16px; width: 16px; font-size: 16px;">${value}</mat-icon>
+    `;
+    this.updateHtml();
   }
-  private svg: SVGElement;
+  private html: string;
 
   @Input()
   set matBadgeHidden(value: boolean) {
@@ -69,27 +69,24 @@ export class IgoBadgeIconDirective implements OnInit {
 
   private originalColor: string;
 
-  constructor(
-    private el: ElementRef,
-    private matIconRegistry: MatIconRegistry
-  ) {}
+  constructor(private el: ElementRef) {}
 
   ngOnInit() {
     this.badge.style.alignItems = 'center';
     this.badge.style.justifyContent = 'center';
 
     this.updateHidden();
     this.updateColor();
-    this.updateSvg();
+    this.updateHtml();
   }
 
-  private updateSvg() {
+  private updateHtml() {
     if (!this.badge) {
       return;
     }
     this.badge.innerHTML = '';
-    if (this.svg) {
-      this.badge.appendChild(this.svg);
+    if (this.html) {
+      this.badge.innerHTML = this.html;
     }
   }
   private updateColor() {

diff --git a/packages/common/src/lib/collapsible/collapsible.component.html b/packages/common/src/lib/collapsible/collapsible.component.html
@@ -1,13 +1,13 @@
 <mat-list-item>
   <mat-icon
-    svgIcon="chevron-up"
     class="igo-chevron"
     matListItemIcon
     igoCollapse
     [target]="content"
     [collapsed]="collapsed"
     (toggle)="collapsed = $event"
   >
+    expand_less
   </mat-icon>
   <span matListItemTitle>{{ title }}</span>
 </mat-list-item>

diff --git a/packages/common/src/lib/entity/entity-table/entity-table.component.html b/packages/common/src/lib/entity/entity-table/entity-table.component.html
@@ -313,15 +313,12 @@
             class="mat-cell-text"
             [ngClass]="row.cellData[column.name].class"
           >
-            <mat-icon
-              *ngIf="column.onClick"
-              svgIcon="{{ row.cellData[column.name].value || column.icon }}"
-              (click)="column.onClick($event)"
-            ></mat-icon>
-            <mat-icon
-              *ngIf="!column.onClick"
-              svgIcon="{{ row.cellData[column.name].value || column.icon }}"
-            ></mat-icon>
+            <mat-icon *ngIf="column.onClick" (click)="column.onClick($event)">{{
+              row.cellData[column.name].value || column.icon
+            }}</mat-icon>
+            <mat-icon *ngIf="!column.onClick">{{
+              row.cellData[column.name].value || column.icon
+            }}</mat-icon>
           </td>
         </ng-container>
         <ng-container
@@ -348,7 +345,7 @@
                     (mousedown)="onButtonClick(button.click, row.record)"
                     [disabled]="button.disabled"
                   >
-                    <mat-icon svgIcon="{{ button.icon }}"></mat-icon>
+                    <mat-icon>{{ button.icon }}</mat-icon>
                   </button>
                   <button
                     *ngIf="button.style !== 'mat-icon-button'"
@@ -358,7 +355,7 @@
                     (mousedown)="onButtonClick(button.click, row.record)"
                     [disabled]="button.disabled"
                   >
-                    <mat-icon svgIcon="{{ button.icon }}"></mat-icon>
+                    <mat-icon>{{ button.icon }}</mat-icon>
                   </button>
                 </ng-container>
               </span>

diff --git a/packages/common/src/lib/form/form-field/form-field-select.component.html b/packages/common/src/lib/form/form-field/form-field-select.component.html
@@ -12,14 +12,11 @@
   <mat-icon
     *ngIf="disableSwitch === true"
     class="igo-form-disable-switch"
-    [svgIcon]="
-      (disabled$ | async) === true
-        ? 'checkbox-blank-outline'
-        : 'checkbox-marked-outline'
-    "
     (click)="onDisableSwitchClick()"
     matPrefix
-  >
+    >{{
+      (disabled$ | async) === true ? 'check_box_outline_blank' : 'check_box'
+    }}
   </mat-icon>
   <mat-error *ngIf="formControl.errors">{{
     getErrorMessage() | translate