Merge pull request #613 from geonetwork/use-material-symbols

Migrate icons from Google Material Icons to Material Symbols
geonetwork · Sep 18, 2023 · f9f9064 · f9f9064
2 parents bfd28df + 7ea17c9
commit f9f9064
Show file tree

Hide file tree

Showing 55 changed files with 150 additions and 107 deletions.
diff --git a/apps/datahub/src/app/home/header-badge-button/header-badge-button.component.css b/apps/datahub/src/app/home/header-badge-button/header-badge-button.component.css
@@ -0,0 +1,3 @@
+mat-icon {
+  font-variation-settings: 'FILL' 1;
+}
diff --git a/apps/datahub/src/app/home/header-badge-button/header-badge-button.component.html b/apps/datahub/src/app/home/header-badge-button/header-badge-button.component.html
@@ -3,6 +3,8 @@
   [class.active]="toggled"
   (click)="toggle()"
 >
-  <mat-icon *ngIf="icon" class="align-middle mr-2">{{ icon }}</mat-icon>
+  <mat-icon *ngIf="icon" class="material-symbols-outlined align-middle mr-2">{{
+    icon
+  }}</mat-icon>
   <span>{{ label | translate }}</span>
 </button>
diff --git a/apps/datahub/src/app/home/navigation-menu/navigation-menu.component.html b/apps/datahub/src/app/home/navigation-menu/navigation-menu.component.html
@@ -19,7 +19,7 @@
     type="button"
     class="h-12 inline-flex items-center justify-center align-middle pl-6 rounded-md shrink-0"
   >
-    <mat-icon class="align-middle">menu</mat-icon>
+    <mat-icon class="material-symbols-outlined align-middle">menu</mat-icon>
   </button>
   <div class="shrink truncate" [class]="displayMobileMenu ? 'block' : 'hidden'">
     <div *ngFor="let l of tabLinks">

diff --git a/apps/datahub/src/app/home/search/search-filters/search-filters.component.html b/apps/datahub/src/app/home/search/search-filters/search-filters.component.html
@@ -36,7 +36,10 @@ <h2 class="text-xl mr-4 font-title" translate>
             (click)="close()"
           >
             <span class="text-sm" translate>search.filters.minimize</span>
-            <mat-icon class="ml-1 align-middle leading-none">remove</mat-icon>
+            <mat-icon
+              class="material-symbols-outlined ml-1 align-middle leading-none"
+              >remove</mat-icon
+            >
           </button>
         </span>
       </div>
@@ -81,7 +84,7 @@ <h2 class="text-xl mr-4 font-title" translate>
         extraClass="!px-[8px]"
         data-cy="filters-expand"
       >
-        <mat-icon>more_horiz</mat-icon>
+        <mat-icon class="material-symbols-outlined">more_horiz</mat-icon>
       </gn-ui-button>
       <button
         type="button"
@@ -91,7 +94,10 @@ <h2 class="text-xl mr-4 font-title" translate>
         data-cy="filters-expand"
       >
         <span class="text-sm" translate>search.filters.maximize</span>
-        <mat-icon class="ml-1 align-middle leading-none">add</mat-icon>
+        <mat-icon
+          class="material-symbols-outlined ml-1 align-middle leading-none"
+          >add</mat-icon
+        >
       </button>
       <gn-ui-sort-by
         [ngClass]="isOpen ? 'block text-white mb-1' : 'hidden sm:block'"
@@ -106,7 +112,10 @@ <h2 class="text-xl mr-4 font-title" translate>
         data-cy="filters-collapse"
       >
         <span class="text-sm" translate>search.filters.minimize</span>
-        <mat-icon class="ml-1 align-middle leading-none">remove</mat-icon>
+        <mat-icon
+          class="material-symbols-outlined ml-1 align-middle leading-none"
+          >remove</mat-icon
+        >
       </button>
     </div>
   </div>

diff --git a/apps/datahub/src/app/record/navigation-bar/navigation-bar.component.html b/apps/datahub/src/app/record/navigation-bar/navigation-bar.component.html
@@ -42,7 +42,9 @@
       type="button"
       class="h-10 inline-flex items-center justify-center p-2 rounded-md shrink-0 sm:hidden"
     >
-      <mat-icon class="align-middle">expand_more</mat-icon>
+      <mat-icon class="material-symbols-outlined align-middle"
+        >expand_more</mat-icon
+      >
     </button>
   </div>
 </nav>
diff --git a/apps/datahub/src/index.html b/apps/datahub/src/index.html
@@ -9,8 +9,8 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined"
       rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
     />
     <link
       rel="preload"

diff --git a/apps/demo/.storybook/preview-head.html b/apps/demo/.storybook/preview-head.html
@@ -1,4 +1,4 @@
 <link
-  href="https://fonts.googleapis.com/icon?family=Material+Icons"
   rel="stylesheet"
+  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
 />
diff --git a/apps/demo/src/app/app.component.css b/apps/demo/src/app/app.component.css
@@ -126,7 +126,7 @@ summary {
   border-color: rgba(27, 31, 35, 0.35);
   background-position: -0.5em;
 }
-.github-star-badge .material-icons {
+.github-star-badge .material-symbols {
   height: 16px;
   width: 16px;
   margin-right: 4px;

diff --git a/apps/map-viewer/src/index.html b/apps/map-viewer/src/index.html
@@ -9,8 +9,8 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined"
       rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
     />
   </head>
   <body>

diff --git a/...etadata-converter/src/app/components/record-field-array/record-field-array.component.html b/...etadata-converter/src/app/components/record-field-array/record-field-array.component.html
@@ -19,7 +19,8 @@
         extraClass="!p-[0.5em]"
         title="Delete this item"
       >
-        <mat-icon class="material-icons-outlined text-[1.6em] !w-[1em] !h-[1em]"
+        <mat-icon
+          class="material-symbols-outlined text-[1.6em] !w-[1em] !h-[1em]"
           >delete_forever</mat-icon
         >
       </gn-ui-button>

diff --git a/apps/metadata-converter/src/index.html b/apps/metadata-converter/src/index.html
@@ -7,8 +7,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="icon" type="image/x-icon" href="favicon.ico" />
     <link
-      href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined"
       rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
     />
     <link
       rel="stylesheet"

diff --git a/apps/metadata-editor/src/app/dashboard/dashboard-menu/dashboard-menu.component.html b/apps/metadata-editor/src/app/dashboard/dashboard-menu/dashboard-menu.component.html
@@ -5,7 +5,7 @@
     routerLinkActive="btn-active"
     #rlaMyOrg="routerLinkActive"
   >
-    <mat-icon class="material-icons-outlined">home</mat-icon>
+    <mat-icon class="material-symbols-outlined">home</mat-icon>
     <span translate="">dashboard.records.myOrg</span>
   </a>
 
@@ -15,7 +15,7 @@
     routerLinkActive="btn-active"
     #rlaAll="routerLinkActive"
   >
-    <mat-icon class="material-icons-outlined">work_outline</mat-icon>
+    <mat-icon class="material-symbols-outlined">work_outline</mat-icon>
     <span translate="">dashboard.records.all</span>
   </a>
 
@@ -26,7 +26,7 @@
     routerLinkActive="btn-active"
     #rlaMyRecords="routerLinkActive"
   >
-    <mat-icon class="material-icons-outlined">post_add</mat-icon>
+    <mat-icon class="material-symbols-outlined">post_add</mat-icon>
     <span translate="">dashboard.records.myRecords</span>
   </a>
   <a
@@ -35,7 +35,7 @@
     routerLinkActive="btn-active"
     #rlaMyDraft="routerLinkActive"
   >
-    <mat-icon class="material-icons-outlined">edit_note</mat-icon>
+    <mat-icon class="material-symbols-outlined">edit_note</mat-icon>
     <span translate="">dashboard.records.myDraft</span>
   </a>
   <a
@@ -44,7 +44,7 @@
     routerLinkActive="btn-active"
     #rlaMyLibrary="routerLinkActive"
   >
-    <mat-icon class="material-icons-outlined">bookmark_border</mat-icon>
+    <mat-icon class="material-symbols-outlined">bookmark_border</mat-icon>
     <span translate="">dashboard.records.myLibrary</span>
   </a>
 </div>
diff --git a/apps/metadata-editor/src/app/dashboard/search-header/search-header.component.html b/apps/metadata-editor/src/app/dashboard/search-header/search-header.component.html
@@ -4,17 +4,17 @@
   </div>
   <div class="flex gap-5 items-center">
     <button>
-      <mat-icon class="icon-btn material-icons-outlined"
+      <mat-icon class="icon-btn material-symbols-outlined"
         >notifications</mat-icon
       >
     </button>
     <button>
-      <mat-icon class="icon-btn material-icons-outlined"
+      <mat-icon class="icon-btn material-symbols-outlined"
         >speaker_notes</mat-icon
       >
     </button>
     <button>
-      <mat-icon class="icon-btn material-icons-outlined">settings</mat-icon>
+      <mat-icon class="icon-btn material-symbols-outlined">settings</mat-icon>
     </button>
     <ng-container *ngrxLet="authService.user$ as user">
       <gn-ui-user-preview

diff --git a/apps/metadata-editor/src/index.html b/apps/metadata-editor/src/index.html
@@ -9,8 +9,8 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined"
       rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
     />
     <link
       rel="preload"

diff --git a/apps/search/src/index.html b/apps/search/src/index.html
@@ -12,8 +12,8 @@
       rel="stylesheet"
     />
     <link
-      href="https://fonts.googleapis.com/icon?family=Material+Icons"
       rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
     />
   </head>
   <body>

diff --git a/.../webcomponents/src/app/components/gn-dataset-view-chart/gn-dataset-view-chart.sample.html b/.../webcomponents/src/app/components/gn-dataset-view-chart/gn-dataset-view-chart.sample.html
@@ -8,8 +8,8 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined"
       rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
     />
     <link
       href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&amp;family=Inter:wght@200;300;400;500;600;700&amp;display=swap"

diff --git a/.../webcomponents/src/app/components/gn-dataset-view-table/gn-dataset-view-table.sample.html b/.../webcomponents/src/app/components/gn-dataset-view-table/gn-dataset-view-table.sample.html
@@ -8,8 +8,8 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined"
       rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
     />
     <link
       href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&amp;family=Inter:wght@200;300;400;500;600;700&amp;display=swap"

diff --git a/apps/webcomponents/src/app/components/gn-facets/gn-facets.sample.html b/apps/webcomponents/src/app/components/gn-facets/gn-facets.sample.html
@@ -8,8 +8,8 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined"
       rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
     />
     <link
       href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&amp;family=Inter:wght@200;300;400;500;600;700&amp;display=swap"

diff --git a/apps/webcomponents/src/app/components/gn-map-viewer/gn-map-viewer.sample.html b/apps/webcomponents/src/app/components/gn-map-viewer/gn-map-viewer.sample.html
@@ -8,8 +8,8 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined"
       rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
     />
     <link
       href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&amp;family=Inter:wght@200;300;400;500;600;700&amp;display=swap"

diff --git a/apps/webcomponents/src/app/components/gn-results-list/gn-results-list-multiple.sample.html b/apps/webcomponents/src/app/components/gn-results-list/gn-results-list-multiple.sample.html
@@ -8,8 +8,8 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined"
       rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
     />
     <link
       href="https://fonts.googleapis.com/css2?family=Roboto:wght@200;300;400;500;600;700&amp;display=swap"

diff --git a/apps/webcomponents/src/app/components/gn-results-list/gn-results-list.sample.html b/apps/webcomponents/src/app/components/gn-results-list/gn-results-list.sample.html
@@ -8,8 +8,8 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined"
       rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
     />
     <link
       href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&amp;family=Inter:wght@200;300;400;500;600;700&amp;display=swap"

diff --git a/.../webcomponents/src/app/components/gn-search-input/gn-search-input-and-results.sample.html b/.../webcomponents/src/app/components/gn-search-input/gn-search-input-and-results.sample.html
@@ -8,8 +8,8 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined"
       rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
     />
     <link
       href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&amp;family=Inter:wght@200;300;400;500;600;700&amp;display=swap"

diff --git a/apps/webcomponents/src/app/components/gn-search-input/gn-search-input.sample.html b/apps/webcomponents/src/app/components/gn-search-input/gn-search-input.sample.html
@@ -8,8 +8,8 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined"
       rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
     />
     <link
       href="https://fonts.googleapis.com/css2?family=DM+Serif+Display&amp;family=Inter:wght@200;300;400;500;600;700&amp;display=swap"

diff --git a/apps/webcomponents/src/styles.css b/apps/webcomponents/src/styles.css
@@ -10,37 +10,14 @@
 
 /* CSS coming from host goog:material import, must be injected in shadowDOM styles */
 @font-face {
-  font-family: 'Material Icons';
-  font-style: normal;
-  font-weight: 400;
-  src: url(https://fonts.gstatic.com/s/materialicons/v139/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2)
-    format('woff2');
-}
-@font-face {
-  font-family: 'Material Icons Outlined';
+  font-family: 'Material Symbols Outlined';
   font-style: normal;
   font-weight: 400;
   src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v108/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2)
     format('woff2');
 }
-.material-icons {
-  font-family: 'Material Icons';
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  -webkit-font-feature-settings: 'liga';
-  -webkit-font-smoothing: antialiased;
-}
-
-.material-icons-outlined {
-  font-family: 'Material Icons Outlined';
+.material-symbols-outlined {
+  font-family: 'Material Symbols Outlined';
   font-weight: normal;
   font-style: normal;
   font-size: 24px;

diff --git a/demo/eea/datacatalogue.html b/demo/eea/datacatalogue.html
@@ -52,8 +52,8 @@
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined"
       rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
     />
     <link
       href="https://fonts.googleapis.com/css2?family=Roboto&amp;family=Inter:wght@200;300;400;500;600;700&amp;display=swap"

diff --git a/libs/feature/map/src/lib/layers-panel/layers-panel.component.html b/libs/feature/map/src/lib/layers-panel/layers-panel.component.html
@@ -2,15 +2,17 @@
   class="bg-white rounded shadow shadow-lg relative h-full w-[400px] overflow-hidden"
 >
   <div class="p-3 border-b border-gray-300 flex items-center">
-    <mat-icon class="mr-2">layers</mat-icon>
+    <mat-icon class="material-symbols-outlined mr-2">layers</mat-icon>
     <span translate>map.layers.list</span>
   </div>
   <div class="flex flex-col px-4 divide-y divide-y-gray-50">
     <div
       *ngFor="let layer of layers$ | async; let index = index"
       class="flex flex-row py-3"
     >
-      <mat-icon class="-ml-2 mr-2 shrink-0">chevron_right</mat-icon>
+      <mat-icon class="material-symbols-outlined -ml-2 mr-2 shrink-0"
+        >chevron_right</mat-icon
+      >
       <span class="mr-2 grow">{{ layer.title }}</span>
       <a
         href
@@ -42,6 +44,6 @@
 </div>
 
 <ng-template #addLayerTitle>
-  <mat-icon class="mr-4">add_circle</mat-icon>
+  <mat-icon class="material-symbols-outlined mr-4">add_circle</mat-icon>
   <span translate>map.add.layer</span>
 </ng-template>
diff --git a/libs/feature/record/src/lib/external-viewer-button/external-viewer-button.component.html b/libs/feature/record/src/lib/external-viewer-button/external-viewer-button.component.html
@@ -5,5 +5,5 @@
   [title]="'record.externalViewer.open' | translate"
   extraClass="!p-[0.6em] !rounded-lg"
 >
-  <mat-icon>open_in_new</mat-icon>
+  <mat-icon class="material-symbols-outlined">open_in_new</mat-icon>
 </gn-ui-button>
diff --git a/libs/feature/record/src/lib/map-view/map-view.component.html b/libs/feature/record/src/lib/map-view/map-view.component.html
@@ -28,7 +28,9 @@
         (click)="resetSelection()"
         class="rounded bg-primary-opacity-25 text-white absolute right-[0.5em]"
       >
-        <mat-icon class="align-middle text-sm" style="height: 21px"
+        <mat-icon
+          class="material-symbols-outlined align-middle text-sm"
+          style="height: 21px"
           >close</mat-icon
         >
       </button>