feat: replace @mdi/angular-material with Google Font - Symbol BREAKIN… (

#1154) * feat: replace @mdi/angular-material with Google Font - Symbol BREAKING CHANGE * feat: icon add provider to register icon class for symbol
infra-geo-ouverte · Apr 11, 2024 · 3c8cf48 · 3c8cf48
1 parent 6cfb3cd
commit 3c8cf48
Show file tree

Hide file tree

Showing 8 changed files with 39 additions and 41 deletions.
diff --git a/...pages/portal/expansion-panel/expansion-panel-button/expansion-panel-button.component.html b/...pages/portal/expansion-panel/expansion-panel-button/expansion-panel-button.component.html
@@ -4,8 +4,7 @@
   [matTooltip]="(expanded ? 'workspace.close' : 'workspace.open') | translate"
   (click)="onToggleClick()"
 >
-  <mat-icon
-    svgIcon="launch"
-    [style.transform]="expanded ? 'rotate(180deg)' : null"
-  ></mat-icon>
+  <mat-icon [style.transform]="expanded ? 'rotate(180deg)' : null">
+    open_in_new
+  </mat-icon>
 </button>
diff --git a/src/app/pages/portal/portal.component.html b/src/app/pages/portal/portal.component.html
@@ -238,8 +238,8 @@
               [ngClass]="{
                 disabled: (workspace.inResolutionRange$ | async) !== true
               }"
-              [svgIcon]="workspace.layer.visible ? 'eye' : 'eye-off'"
             >
+              {{ workspace.layer.visible ? 'visibility' : 'visibility_off' }}
             </mat-icon>
           </button>
           <button
@@ -258,7 +258,7 @@
             [matTooltip]="'workspace.addFeature' | translate"
             (click)="addFeature(workspace)"
           >
-            <mat-icon svgIcon="plus"> </mat-icon>
+            <mat-icon>add</mat-icon>
           </button>
           <igo-actionbar
             class="actionbar-workspace"
@@ -290,14 +290,11 @@
             [matTooltip]="'toastPanel.zoomOnFeaturesTooltip' | translate"
             (click)="zoomToSelectedFeatureWks()"
           >
-            <mat-icon
-              svgIcon="{{
-                (workspaceState.workspaceSelection$ | async).length > 1
-                  ? 'magnify-scan'
-                  : 'magnify-plus-outline'
-              }}"
-            >
-            </mat-icon>
+            @if ((workspaceState.workspaceSelection$ | async).length > 1) {
+              <igo-icon [icon]="magnifyIcon"></igo-icon>
+            } @else {
+              <mat-icon>zoom_in </mat-icon>
+            }
           </button>
         </div>
         <igo-entity-table-paginator
@@ -342,7 +339,7 @@
       color="warn"
       (click)="toastPanelForExpansionOpened = false"
     >
-      <mat-icon svgIcon="close"></mat-icon>
+      <mat-icon>close</mat-icon>
     </button>
   </div>
 

diff --git a/src/app/pages/portal/portal.component.ts b/src/app/pages/portal/portal.component.ts
@@ -32,7 +32,10 @@ import {
   EntityRecord,
   EntityStore,
   EntityTablePaginatorOptions,
+  IconSvg,
+  IgoIconComponent,
   LongPressDirective,
+  MAGNIFY_SCAN_ICON,
   Tool,
   Toolbox,
   WORKSPACE_DIRECTIVES,
@@ -180,7 +183,8 @@ import { WelcomeWindowService } from './welcome-window/welcome-window.service';
     TranslateModule,
     UserButtonComponent,
     WORKSPACE_DIRECTIVES,
-    WorkspaceUpdatorDirective
+    WorkspaceUpdatorDirective,
+    IgoIconComponent
   ]
 })
 export class PortalComponent implements OnInit, OnDestroy {
@@ -241,6 +245,8 @@ export class PortalComponent implements OnInit, OnDestroy {
   public homeZoom: number;
   isTouchScreen: boolean;
 
+  magnifyIcon: IconSvg = MAGNIFY_SCAN_ICON;
+
   @ViewChild('mapBrowser', { read: ElementRef, static: true })
   mapBrowser: ElementRef;
   @ViewChild('searchBar', { read: ElementRef, static: true })

diff --git a/src/app/pages/portal/sidenav/sidenav.component.html b/src/app/pages/portal/sidenav/sidenav.component.html
@@ -26,7 +26,7 @@
           [matTooltip]="'igo.context.sidenav.goBack' | translate"
           (click)="onPreviousButtonClick()"
         >
-          <mat-icon svgIcon="arrow-left"></mat-icon>
+          <mat-icon>arrow_back</mat-icon>
         </button>
 
         <igo-interactive-tour panelRightButton styleButton="icon">

diff --git a/src/app/pages/portal/toast-panel/toast-panel.component.html b/src/app/pages/portal/toast-panel/toast-panel.component.html
@@ -44,8 +44,8 @@
         matBadgeColor="accent"
         matBadgeSize="small"
         [matBadgeHidden]="(isSelectedResultOutOfView$ | async) !== true"
-        svgIcon="magnify-plus-outline"
-      ></mat-icon>
+        >zoom_in</mat-icon
+      >
     </button>
 
     <button
@@ -64,9 +64,8 @@
       [color]="(potententialLayerisAdded$ | async) ? 'warn' : ''"
       (click)="handleLayer()"
     >
-      <mat-icon
-        [svgIcon]="(potententialLayerisAdded$ | async) ? 'delete' : 'plus'"
-      >
+      <mat-icon>
+        {{ (potententialLayerisAdded$ | async) ? 'delete' : 'add' }}
       </mat-icon>
     </button>
 
@@ -80,7 +79,7 @@
       matTooltipShowDelay="500"
       (click)="previousResult()"
     >
-      <mat-icon svgIcon="chevron-left"></mat-icon>
+      <mat-icon>chevron_left</mat-icon>
     </button>
 
     <button
@@ -95,7 +94,7 @@
       matTooltipShowDelay="500"
       (click)="nextResult()"
     >
-      <mat-icon svgIcon="chevron-right"></mat-icon>
+      <mat-icon>chevron_right</mat-icon>
     </button>
 
     <button
@@ -112,15 +111,17 @@
       "
       matTooltipShowDelay="500"
     >
-      <mat-icon svgIcon="{{ iconResizeWindows }}"></mat-icon>
+      <mat-icon>{{
+        fullExtent ? 'collapse_content' : 'expand_content'
+      }}</mat-icon>
     </button>
     <button
       mat-icon-button
       igoStopPropagation
       panelRightButton
       (click)="clear()"
     >
-      <mat-icon svgIcon="close"></mat-icon>
+      <mat-icon>close</mat-icon>
     </button>
 
     <div #content class="toast-content">

diff --git a/src/app/pages/portal/toast-panel/toast-panel.component.ts b/src/app/pages/portal/toast-panel/toast-panel.component.ts
@@ -341,7 +341,6 @@ export class ToastPanelComponent implements OnInit, OnDestroy {
     this.opened = this.storageService.get('toastOpened') as boolean;
     this.zoomAuto = this.storageService.get('zoomAuto') as boolean;
     this.fullExtent = this.storageService.get('fullExtent') as boolean;
-    this.setResizeWindowIcon();
   }
 
   private monitorResultOutOfView() {
@@ -956,16 +955,6 @@ export class ToastPanelComponent implements OnInit, OnDestroy {
     }
   }
 
-  setResizeWindowIcon() {
-    if (this.fullExtent) {
-      this.iconResizeWindows = 'arrow-collapse';
-      // this.iconResizeWindows = 'vector-arrange-below';
-    } else {
-      this.iconResizeWindows = 'arrow-expand';
-      // this.iconResizeWindows = 'crop-square';
-    }
-  }
-
   resizeWindows() {
     this.storageService.set('fullExtent', !this.fullExtent);
 
@@ -978,11 +967,9 @@ export class ToastPanelComponent implements OnInit, OnDestroy {
 
   reduceWindow() {
     this.fullExtent = false;
-    this.setResizeWindowIcon();
   }
 
   enlargeWindows() {
     this.fullExtent = true;
-    this.setResizeWindowIcon();
   }
 }
diff --git a/src/main.ts b/src/main.ts
@@ -18,6 +18,7 @@ import { ServiceWorkerModule } from '@angular/service-worker';
 
 import { provideAuthentification } from '@igo2/auth';
 import { withMicrosoftSupport } from '@igo2/auth/microsoft';
+import { provideIcon } from '@igo2/common';
 import { IgoCoreModule } from '@igo2/core';
 import { ConfigService, provideConfigOptions } from '@igo2/core/config';
 import { provideRootTranslation } from '@igo2/core/language';
@@ -30,7 +31,6 @@ import 'hammerjs';
 import { AppComponent } from './app/app.component';
 import { PortalModule } from './app/pages';
 import { environment } from './environments/environment';
-import { provideIcon } from '@igo2/common';
 
 const DEFAULT_THEME: string = 'blue-theme';
 
@@ -49,7 +49,7 @@ bootstrapApplication(AppComponent, {
   providers: [
     importProvidersFrom(
       BrowserModule,
-      IgoCoreModule.forRoot(),
+      IgoCoreModule,
       IgoMessageModule,
       PortalModule,
       ServiceWorkerModule.register('ngsw-worker.js', {

diff --git a/src/styles.scss b/src/styles.scss
@@ -4,6 +4,14 @@
 @use 'style/reset.scss';
 @use 'style/theme.scss';
 
+.material-symbols-outlined {
+  font-variation-settings:
+    'FILL' 1,
+    'wght' 400,
+    'GRAD' 0,
+    'opsz' 24;
+}
+
 .shepherd-element[data-popper-reference-hidden]:not(.shepherd-centered) {
   opacity: 1;
   visibility: visible;