Remove mat-icons in favor for ng-icons to avoid calling a cdn

Signed-off-by: trivernis <trivernis@protonmail.com>

mediarepo-ui/package.json

@@ -23,6 +23,9 @@
     "@angular/platform-browser": "~12.2.0",
     "@angular/platform-browser-dynamic": "~12.2.0",
     "@angular/router": "~12.2.0",
+    "@ng-icons/core": "^13.1.1",
+    "@ng-icons/feather-icons": "^13.1.1",
+    "@ng-icons/material-icons": "^13.1.1",
     "@tauri-apps/api": "^1.0.0-beta.8",
     "ngx-lightbox": "^2.5.1",
     "primeicons": "^4.1.0",

mediarepo-ui/src/app/app.component.scss

@@ -0,0 +1,7 @@
+::ng-deep .mat-button-wrapper > ng-icon {
+  font-size: 26px;
+}
+
+::ng-deep ng-icon {
+  font-size: 24px;
+}

mediarepo-ui/src/app/app.module.ts

@@ -23,7 +23,6 @@ import {MatProgressBarModule} from "@angular/material/progress-bar";
 import {MatPaginatorModule} from "@angular/material/paginator";
 import {ScrollingModule} from "@angular/cdk/scrolling";
 import {MatChipsModule} from "@angular/material/chips";
-import {MatIconModule} from "@angular/material/icon";
 import {MatAutocompleteModule} from "@angular/material/autocomplete";
 import {FileSearchComponent} from './components/file-search/file-search.component';
 import {MatTabsModule} from "@angular/material/tabs";
@@ -66,6 +65,8 @@ import {HttpClientModule} from "@angular/common/http";
 import { AudioViewerComponent } from './components/file-gallery/content-viewer/audio-viewer/audio-viewer.component';
 import { BusyIndicatorComponent } from './components/busy-indicator/busy-indicator.component';
 import { FileThumbnailComponent } from './components/file-thumbnail/file-thumbnail.component';
+import {NgIconsModule} from "@ng-icons/core";
+import * as materialIcons from "@ng-icons/material-icons";
 
 @NgModule({
   declarations: [
@@ -120,7 +121,6 @@ import { FileThumbnailComponent } from './components/file-thumbnail/file-thumbna
     MatPaginatorModule,
     ScrollingModule,
     MatChipsModule,
-    MatIconModule,
     MatAutocompleteModule,
     MatTabsModule,
     FlexModule,
@@ -138,6 +138,7 @@ import { FileThumbnailComponent } from './components/file-thumbnail/file-thumbna
     MatExpansionModule,
     MatCheckboxModule,
     HttpClientModule,
+    NgIconsModule.withIcons({...materialIcons}),
   ],
   providers: [],
   bootstrap: [AppComponent]

mediarepo-ui/src/app/components/file-edit/file-edit.component.html

@@ -11,7 +11,7 @@
       <div class="editable-tag" *cdkVirtualFor="let tag of tags">
         <app-tag-item [tag]="tag"></app-tag-item>
         <button class="tag-remove-button" mat-icon-button (click)="removeTag(tag)">
-          <mat-icon>remove</mat-icon>
+          <ng-icon name="mat-remove"></ng-icon>
         </button>
       </div>
     </cdk-virtual-scroll-viewport>
@@ -21,9 +21,9 @@
     <div class="tag-input-field">
       <app-tag-input [availableTags]="this.allTags" [allowInvalid]="true" (tagAdded)="this.editTag($event)"></app-tag-input>
       <button mat-icon-button class="add-tag-button">
-        <mat-icon *ngIf="editMode === 'Toggle'">change_circle</mat-icon>
-        <mat-icon *ngIf="editMode === 'Add'">add_circle</mat-icon>
-        <mat-icon *ngIf="editMode === 'Remove'">remove_circle</mat-icon>
+        <ng-icon *ngIf="editMode === 'Toggle'" name="mat-change-circle"></ng-icon>
+        <ng-icon *ngIf="editMode === 'Add'" name="mat-add-circle"></ng-icon>
+        <ng-icon *ngIf="editMode === 'Remove'" name="mat-remove-circle"></ng-icon>
       </button>
     </div>
     <mat-form-field class="form-field-mode" appearance="fill">

mediarepo-ui/src/app/components/file-gallery/content-viewer/image-viewer/image-viewer.component.html

@@ -4,7 +4,7 @@
     <mat-slider (input)="this.imageZoom=$event.value ?? 1" [value]="this.imageZoom" max="4"
                 min="0.5" step="0.1" vertical></mat-slider>
     <button (click)="this.resetImage()" mat-icon-button>
-      <mat-icon>refresh</mat-icon>
+      <ng-icon name="mat-refresh"></ng-icon>
     </button>
   </div>
   <div (cdkDragMoved)="this.onDragMoved($event)"

mediarepo-ui/src/app/components/file-gallery/file-gallery.component.html

@@ -1,6 +1,6 @@
 <div class="gallery-container" fxLayout="column">
   <button (click)="this.closeEvent.emit(this)" class="close-button" mat-icon-button>
-    <mat-icon>close</mat-icon>
+    <ng-icon name="mat-close"></ng-icon>
   </button>
   <div (dblclick)="this.selectedFile? this.fileDblClickEvent.emit(this.selectedFile.data) : null" class="file-full-view"
        fxFlex="80%">

mediarepo-ui/src/app/components/file-search/file-search.component.html

@@ -6,12 +6,12 @@
     </div>
   </div>
   <button (click)="removeAllSearchTags()" id="delete-all-tags-button" mat-icon-button>
-    <mat-icon>delete-sweep</mat-icon>
+    <ng-icon name="mat-delete-sweep"></ng-icon>
   </button>
 </div>
 <app-tag-input class="full-width" [allowNegation]="true" [availableTags]="getValidSearchTags()" (tagAdded)="addSearchTag($event); searchForFiles()">
   <button mat-button class="filter-dialog-button" (click)="openFilterDialog()">
-    <mat-icon>filter_alt</mat-icon>
+    <ng-icon name="mat-filter-alt"></ng-icon>
   </button>
 </app-tag-input>
 <button (click)="openSortDialog()" id="sort-button" mat-flat-button>Sort: {{sortExpression.join(", ")}}</button>

mediarepo-ui/src/app/components/file-search/file-search.component.scss

@@ -58,5 +58,5 @@
 .filter-dialog-button {
   position: absolute;
   right: -13px;
-  top: -20px;
+  top: -17px;
 }

mediarepo-ui/src/app/components/file-search/filter-dialog/tag-filter-list-item/tag-filter-list-item.component.html

@@ -1,7 +1,7 @@
 <div *ngIf="expression.data.filter_type === 'Query'" (click)="onSelect()">
   {{expression.data.getDisplayName()}}
   <button mat-button class="remove-button" (click)="this.removeClicked.emit(this)">
-        <mat-icon>remove</mat-icon>
+        <ng-icon name="mat-remove"></ng-icon>
       </button>
 </div>
 <div *ngIf="expression.data.filter_type === 'OrExpression'">
@@ -11,7 +11,7 @@
       <span class="or-span" *ngIf="entry[0] > 0">OR</span>
       {{entry[1].getNormalizedTag()}}
       <button mat-button class="remove-button-inner-list" (mousedown)="$event.button === 0 && this.removeOrExpression(entry[0])">
-        <mat-icon>remove</mat-icon>
+        <ng-icon name="mat-remove"></ng-icon>
       </button>
     </mat-list-item>
   </mat-list>

mediarepo-ui/src/app/components/file-search/sort-dialog/sort-dialog.component.html

@@ -4,7 +4,7 @@
     <div *ngFor="let sortKey of sortEntries" cdkDrag class="sort-input-row">
       <div *cdkDragPlaceholder class="drag-placeholder"></div>
       <div cdkDragHandle class="drag-handle">
-        <mat-icon>drag_handle</mat-icon>
+        <ng-icon name="mat-drag-handle"></ng-icon>
       </div>
       <mat-form-field>
         <mat-label>Key</mat-label>
@@ -33,11 +33,11 @@
         </mat-select>
       </mat-form-field>
       <button (click)="addNewSortKey()" *ngIf="sortEntries.indexOf(sortKey) === sortEntries.length -1" mat-flat-button>
-        <mat-icon>add</mat-icon>
+        <ng-icon name="mat-add"></ng-icon>
       </button>
       <button (click)="removeSortKey(sortKey)" *ngIf="sortEntries.indexOf(sortKey) !== sortEntries.length -1"
               mat-flat-button>
-        <mat-icon>remove</mat-icon>
+        <ng-icon name="mat-remove"></ng-icon>
       </button>
     </div>
   </div>

mediarepo-ui/src/app/components/file-thumbnail/file-thumbnail.component.html

@@ -1,12 +1,12 @@
 <app-content-aware-image borderRadius="0.25em" *ngIf="this.getThumbnailSupported() && this.thumbUrl"
                          [imageSrc]="this.thumbUrl"></app-content-aware-image>
 <div class="file-icon-overlay" *ngIf="this.getThumbnailSupported() && this.thumbUrl">
-  <mat-icon *ngIf="getFileType() === 'video'">movie</mat-icon>
-  <mat-icon *ngIf="this.file.mime_type === 'image/gif'" class="gif-icon">gif</mat-icon>
+  <ng-icon *ngIf="getFileType() === 'video'" name="mat-movie"></ng-icon>
+  <ng-icon *ngIf="this.file.mime_type === 'image/gif'" class="gif-icon" name="mat-gif"></ng-icon>
 </div>
 <div class="file-type-icon" *ngIf="!this.getThumbnailSupported() || !this.thumbUrl">
-  <mat-icon *ngIf="getFileType() === 'image'">image</mat-icon>
-  <mat-icon *ngIf="getFileType() === 'video'">movie</mat-icon>
-  <mat-icon *ngIf="getFileType() === 'audio'">audiotrack</mat-icon>
-  <mat-icon *ngIf="getFileType() === 'text'">description</mat-icon>
+  <ng-icon *ngIf="getFileType() === 'image'" name="mat-image"></ng-icon>
+  <ng-icon *ngIf="getFileType() === 'video'" name="mat-movie"></ng-icon>
+  <ng-icon *ngIf="getFileType() === 'audio'" name="mat-audiotrack"></ng-icon>
+  <ng-icon *ngIf="getFileType() === 'text'" name="mat-description"></ng-icon>
 </div>

mediarepo-ui/src/app/components/file-thumbnail/file-thumbnail.component.scss

@@ -12,7 +12,7 @@ app-content-aware-image {
   width: 100%;
   display: flex;
 
-  mat-icon {
+  ng-icon {
     align-self: center;
     margin: auto;
   }
@@ -24,13 +24,13 @@ app-content-aware-image {
   right: 0;
 }
 
-mat-icon.gif-icon {
+ng-icon.gif-icon {
   border-radius: 50%;
   background-color: rgba(0, 0, 0, 0.5);
   padding: 0.1em;
 }
 
-mat-icon {
+ng-icon {
   font-size: 4em;
   height: 1em;
   width: 1em;

mediarepo-ui/src/app/components/inputs/native-file-select/native-file-select.component.html

@@ -6,10 +6,10 @@
 
     <div class="buttons-native-select">
       <button *ngIf="mode === 'files'" (click)="openNativeFileSelectDialog(false)" mat-button>
-        <mat-icon>insert_drive_file</mat-icon>
+        <ng-icon name="mat-insert-drive-file"></ng-icon>
       </button>
       <button *ngIf="mode === 'folders'" (click)="openNativeFileSelectDialog(true)" mat-button>
-        <mat-icon>folder</mat-icon>
+        <ng-icon name="mat-folder"></ng-icon>
       </button>
     </div>
 

mediarepo-ui/src/app/pages/home/repositories-tab/add-repository-dialog/add-repository-dialog.component.html

@@ -21,7 +21,7 @@
                     matTooltip="Path where the repository is located or should be created"
                     matTooltipShowDelay="1000">
       <button (click)="openFolderDialog()" class="button-folder-select" mat-button>
-        <mat-icon>folder</mat-icon>
+        <ng-icon name="mat-folder"></ng-icon>
       </button>
       <mat-label>Path</mat-label>
       <input (change)="this.checkLocalRepoExists()" formControlName="path" matInput>

mediarepo-ui/src/app/pages/home/repositories-tab/repository-card/repository-card.component.html

@@ -26,7 +26,7 @@
               mat-flat-button>Disconnect
       </button>
       <button [mat-menu-trigger-for]="menu" class="menu-button" mat-button>
-        <mat-icon>more_vert</mat-icon>
+        <ng-icon name="mat-more-vert"></ng-icon>
       </button>
       <mat-menu #menu="matMenu">
         <button (click)="removeRepository()" *ngIf="repository.local" mat-menu-item>Delete</button>

mediarepo-ui/src/index.html

@@ -6,9 +6,6 @@
   <base href="/">
   <meta content="width=device-width, initial-scale=1" name="viewport">
   <link href="favicon.ico" rel="icon" type="image/x-icon">
-  <link href="https://fonts.gstatic.com" rel="preconnect">
-  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 </head>
 <body class="mat-typography">
 <app-root></app-root>

mediarepo-ui/yarn.lock

@@ -1331,6 +1331,27 @@
     merge-source-map "^1.1.0"
     schema-utils "^2.7.0"
 
+"@ng-icons/core@^13.1.1":
+  version "13.1.1"
+  resolved "https://registry.yarnpkg.com/@ng-icons/core/-/core-13.1.1.tgz#e462e84c4777fc04cf9de75f0ad2957f6134ffb0"
+  integrity sha512-1bGXH8uNH+5NF6dP/niw35BsPHa8cpROEABmvJSfxdenRlNpOK7mGEh51HsO5/8Txq4vpxz9UjjTATgToDfxsQ==
+  dependencies:
+    tslib "^2.2.0"
+
+"@ng-icons/feather-icons@^13.1.1":
+  version "13.1.1"
+  resolved "https://registry.yarnpkg.com/@ng-icons/feather-icons/-/feather-icons-13.1.1.tgz#c263daef9628813b90b3e03bc32dc4f2b4cb2e89"
+  integrity sha512-8bR6UGo/VHA3fhTEiOYB/mWJZcSdn1DQfTqJrmxL22jIAC5qDW8sG8jq3nbPSixGBPq7iqjqxMrBH5vAqwYhKQ==
+  dependencies:
+    tslib "^2.2.0"
+
+"@ng-icons/material-icons@^13.1.1":
+  version "13.1.1"
+  resolved "https://registry.yarnpkg.com/@ng-icons/material-icons/-/material-icons-13.1.1.tgz#e4bd78276b68c0b9fbf0d4a076a51750b4deb98d"
+  integrity sha512-G9Tn2w/a1PgnARea294J8pieBD52MCEp7zbi9N7hhvuFaRlvyXdLtdqNw/GEb0dy8CEJkp258XZQepnKd6Z6kQ==
+  dependencies:
+    tslib "^2.2.0"
+
 "@ngtools/webpack@12.2.9":
   version "12.2.9"
   resolved "https://registry.yarnpkg.com/@ngtools/webpack/-/webpack-12.2.9.tgz#e13d815d35e155bea6e2b13f6f54bc3275ed0670"