Replacing icons with https://ionic.io/ionicons at Albums

#587

src/frontend/app/app.module.ts

@@ -133,7 +133,7 @@ import {
   ionImagesOutline,
   ionInformationOutline,
   ionLinkOutline,
-  ionLocationOutline,
+  ionLocationOutline, ionLockClosedOutline,
   ionLogOutOutline,
   ionMenuOutline,
   ionMoonOutline,
@@ -217,7 +217,7 @@ Marker.prototype.options.icon = MarkerFactory.defIcon;
       ionInformationOutline, ionContractOutline, ionExpandOutline, ionCloseOutline,
       ionTimerOutline,
       ionPlayOutline, ionPauseOutline, ionVolumeMediumOutline, ionVolumeMuteOutline,
-      ionCameraOutline, ionWarningOutline
+      ionCameraOutline, ionWarningOutline, ionLockClosedOutline
     }),
     ClipboardModule,
     TooltipModule.forRoot(),

src/frontend/app/ui/albums/album/album.component.html

@@ -10,21 +10,25 @@
          *ngIf="thumbnail && thumbnail.Available"
          [style.background-image]="getSanitizedThUrl()"></div>
 
-    <app-icon *ngIf="!thumbnail || !thumbnail.Available"  class="no-image"></app-icon>
+    <app-icon *ngIf="!thumbnail || !thumbnail.Available" class="no-image"></app-icon>
   </div>
 
 
   <!--Info box -->
   <div class="info rounded-bottom">
     {{album.name}} ({{album.count}})
-    <span *ngIf="CanUpdate && !album.locked"
-          (click)="deleteAlbum($event)"
-          class="info-button delete oi oi-trash float-end"></span>
+    <ng-icon *ngIf="CanUpdate && !album.locked"
+             (click)="deleteAlbum($event)"
+             class="info-button delete float-end"
+             name="ionTrashOutline"
+             title="Delete" i18n-title></ng-icon>
+
+    <ng-icon *ngIf="album.locked"
+             class="info-button float-end"
+             name="ionLockClosedOutline"
+             title="Album is locked, cannot be deleted from the webpage."
+             i18n-title></ng-icon>
 
-    <span *ngIf="album.locked"
-          title="Album is locked, cannot be deleted from the webpage."
-          i18n-title
-          class="info-button oi oi-lock-locked float-end"></span>
   </div>
 </a>
 

src/frontend/app/ui/albums/albums.component.css

@@ -20,10 +20,14 @@ app-album {
 
 .add-saved-search .text {
   position: relative;
-  top: calc(50% - 40px);
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%,-50%);
   text-align: center;
 }
 
-.add-saved-search .text .oi {
-  font-size: 80px;
+.add-saved-search .text ng-icon {
+  font-size: 120px;
+  display: inline-block;
+  width: 100%;
 }

src/frontend/app/ui/albums/albums.component.html

@@ -11,7 +11,7 @@
          [style.height.px]="size"
          (click)="openModal(modal)">
       <div class="text">
-        <span class="oi oi-plus" aria-hidden="true">  </span><br/>
+        <ng-icon name="ionAddOutline" class="mb-2"></ng-icon>
         <span i18n>Add saved search</span>
       </div>
     </div>
@@ -67,7 +67,7 @@
         <button class="btn btn-primary" type="button"
                 [disabled]="savedSearch.searchQuery.text == ''"
                 (click)="saveSearch()">
-          <span class="oi oi-folder"></span> Save
+          <ng-icon name="ionSaveOutline" class="me-2"></ng-icon><span i18n>Save</span>
         </button>
       </div>
     </form>

src/frontend/app/ui/albums/saved-search-popup/saved-search-popup.component.html

@@ -1,7 +1,7 @@
 <button class="btn btn-secondary" type="button"
         [disabled]="disabled"
         (click)="openModal(modal)">
-  <span class="oi oi-file  me-2"></span><ng-container i18n>To .pg2conf</ng-container>
+  <ng-icon class="me-2" name="ionFolderOutline"></ng-icon><ng-container i18n>To .pg2conf</ng-container>
 </button>