Replacing icons with https://ionic.io/ionicons on the main page

#587

package-lock.json

@@ -56,6 +56,8 @@
         "@angular/router": "15.2.2",
         "@asymmetrik/ngx-leaflet": "15.0.1",
         "@asymmetrik/ngx-leaflet-markercluster": "15.0.0",
+        "@ng-icons/core": "24.0.0",
+        "@ng-icons/ionicons": "24.0.0",
         "@ngx-loading-bar/core": "6.0.2",
         "@types/archiver": "5.3.1",
         "@types/bcrypt": "5.0.0",
@@ -3944,6 +3946,28 @@
         "node-pre-gyp": "bin/node-pre-gyp"
       }
     },
+    "node_modules/@ng-icons/core": {
+      "version": "24.0.0",
+      "resolved": "https://registry.npmjs.org/@ng-icons/core/-/core-24.0.0.tgz",
+      "integrity": "sha512-zqe8MDcIB/SXT14d/5gh4SwRrY2ndHALGeFO7YxWm9o+88UuftrLuyVx+UnfWM4h7s4fJp0cXFjikBtbKi80bQ==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.2.0"
+      },
+      "peerDependencies": {
+        "@angular/common": ">=14.0.0",
+        "@angular/core": ">=14.0.0"
+      }
+    },
+    "node_modules/@ng-icons/ionicons": {
+      "version": "24.0.0",
+      "resolved": "https://registry.npmjs.org/@ng-icons/ionicons/-/ionicons-24.0.0.tgz",
+      "integrity": "sha512-GcKYOH9S0aqVyo2NZFw1HDEexXyD7Kn3F/YeZdVUX/tDYfdhj32cO1FwvVnXDtabrhPeqw1vVZQpIvcDkka8NA==",
+      "dev": true,
+      "dependencies": {
+        "tslib": "^2.2.0"
+      }
+    },
     "node_modules/@ngtools/webpack": {
       "version": "15.2.2",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-15.2.2.tgz",
@@ -26020,6 +26044,24 @@
         "tar": "^6.1.11"
       }
     },
+    "@ng-icons/core": {
+      "version": "24.0.0",
+      "resolved": "https://registry.npmjs.org/@ng-icons/core/-/core-24.0.0.tgz",
+      "integrity": "sha512-zqe8MDcIB/SXT14d/5gh4SwRrY2ndHALGeFO7YxWm9o+88UuftrLuyVx+UnfWM4h7s4fJp0cXFjikBtbKi80bQ==",
+      "dev": true,
+      "requires": {
+        "tslib": "^2.2.0"
+      }
+    },
+    "@ng-icons/ionicons": {
+      "version": "24.0.0",
+      "resolved": "https://registry.npmjs.org/@ng-icons/ionicons/-/ionicons-24.0.0.tgz",
+      "integrity": "sha512-GcKYOH9S0aqVyo2NZFw1HDEexXyD7Kn3F/YeZdVUX/tDYfdhj32cO1FwvVnXDtabrhPeqw1vVZQpIvcDkka8NA==",
+      "dev": true,
+      "requires": {
+        "tslib": "^2.2.0"
+      }
+    },
     "@ngtools/webpack": {
       "version": "15.2.2",
       "resolved": "https://registry.npmjs.org/@ngtools/webpack/-/webpack-15.2.2.tgz",

package.json

@@ -76,6 +76,8 @@
     "@angular/router": "15.2.2",
     "@asymmetrik/ngx-leaflet": "15.0.1",
     "@asymmetrik/ngx-leaflet-markercluster": "15.0.0",
+    "@ng-icons/core": "24.0.0",
+    "@ng-icons/ionicons": "24.0.0",
     "@ngx-loading-bar/core": "6.0.2",
     "@types/archiver": "5.3.1",
     "@types/bcrypt": "5.0.0",

src/frontend/app/app.module.ts

@@ -48,7 +48,6 @@ import {HTTP_INTERCEPTORS, HttpClient, HttpClientModule,} from '@angular/common/
 import {DefaultUrlSerializer, UrlSerializer, UrlTree} from '@angular/router';
 import {LanguageComponent} from './ui/language/language.component';
 import {QueryService} from './model/query.service';
-import {IconizeSortingMethod} from './pipes/IconizeSortingMethod';
 import {StringifySortingMethod} from './pipes/StringifySortingMethod';
 import {RandomQueryBuilderGalleryComponent} from './ui/gallery/random-query-builder/random-query-builder.gallery.component';
 import {DurationPipe} from './pipes/DurationPipe';
@@ -109,6 +108,31 @@ import {StringifyEnum} from './pipes/StringifyEnum';
 import {StringifySearchType} from './pipes/StringifySearchType';
 import {MarkerFactory} from './ui/gallery/map/MarkerFactory';
 import {IconComponent} from './icon.component';
+import {NgIconsModule} from '@ng-icons/core';
+import {
+  ionAlbumsOutline,
+  ionArrowDownOutline,
+  ionArrowUpOutline,
+  ionCalendarOutline, ionChevronForwardOutline,
+  ionCloudDownloadOutline,
+  ionCopyOutline,
+  ionFunnelOutline,
+  ionGitBranchOutline,
+  ionHammerOutline,
+  ionImagesOutline,
+  ionLinkOutline,
+  ionLogOutOutline,
+  ionMenuOutline,
+  ionPeopleOutline,
+  ionPersonOutline,
+  ionSearchOutline,
+  ionSettingsOutline,
+  ionShareSocialOutline,
+  ionShuffleOutline,
+  ionStarOutline,
+  ionTrashOutline,
+} from '@ng-icons/ionicons';
+import {SortingMethodIconComponent} from './ui/sorting-method-icon/sorting-method-icon.component';
 
 @Injectable()
 export class MyHammerConfig extends HammerGestureConfig {
@@ -150,6 +174,17 @@ Marker.prototype.options.icon = MarkerFactory.defIcon;
     HttpClientModule,
     BrowserAnimationsModule,
     AppRoutingModule,
+    NgIconsModule.withIcons({
+      ionCloudDownloadOutline, ionFunnelOutline,
+      ionGitBranchOutline, ionArrowDownOutline, ionArrowUpOutline,
+      ionStarOutline, ionCalendarOutline, ionPersonOutline, ionShuffleOutline,
+      ionPeopleOutline,
+      ionMenuOutline, ionShareSocialOutline,
+      ionImagesOutline, ionLinkOutline, ionSearchOutline, ionHammerOutline, ionCopyOutline,
+      ionAlbumsOutline, ionSettingsOutline, ionLogOutOutline,
+      ionChevronForwardOutline,
+      ionTrashOutline,
+    }),
     ClipboardModule,
     TooltipModule.forRoot(),
     ToastrModule.forRoot(),
@@ -219,7 +254,6 @@ Marker.prototype.options.icon = MarkerFactory.defIcon;
 
     // Pipes
     StringifyRole,
-    IconizeSortingMethod,
     StringifySortingMethod,
     DurationPipe,
     FileSizePipe,
@@ -232,6 +266,7 @@ Marker.prototype.options.icon = MarkerFactory.defIcon;
     PhotoFilterPipe,
     UsersComponent,
     SharingsListComponent,
+    SortingMethodIconComponent,
   ],
   providers: [
     {provide: HTTP_INTERCEPTORS, useClass: CSRFInterceptor, multi: true},

src/frontend/app/icon.component.ts

@@ -3,6 +3,7 @@ import {Config} from '../../common/config/public/Config';
 
 @Component({
   selector: 'app-icon',
+  styles: [':host {line-height: 0}'],
   template: `
     <svg xmlns="http://www.w3.org/2000/svg"
          [attr.width]="width"

src/frontend/app/pipes/IconizeSortingMethod.ts

@@ -1,29 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-import { SortingMethods } from '../../../common/entities/SortingMethods';
-
-@Pipe({ name: 'iconizeSorting' })
-export class IconizeSortingMethod implements PipeTransform {
-  transform(method: SortingMethods): string {
-    switch (method) {
-      case SortingMethods.ascRating:
-        return '<span class="oi oi-sort-ascending"></span><span class="oi oi-star text-bold"></span>';
-      case SortingMethods.descRating:
-        return '<span class="oi oi-sort-descending"></span><span class="oi oi-star text-bold"></span>';
-      case SortingMethods.ascPersonCount:
-        return '<span class="oi oi-sort-ascending"></span><span class="oi oi-person text-bold"></span>';
-      case SortingMethods.descPersonCount:
-        return '<span class="oi oi-sort-descending"></span><span class="oi oi-person text-bold"></span>';
-      case SortingMethods.ascName:
-        return '<span class="oi oi-sort-ascending"></span><strong>A</strong>';
-      case SortingMethods.descName:
-        return '<span class="oi oi-sort-descending"></span><strong>A</strong>';
-      case SortingMethods.ascDate:
-        return '<span class="oi oi-sort-ascending"></span>';
-      case SortingMethods.descDate:
-        return '<span class="oi oi-sort-descending"></span>';
-      case SortingMethods.random:
-        return '<span class="oi oi-random"></span>';
-    }
-  }
-}
-

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

@@ -52,8 +52,12 @@ a.dropdown-item, button.dropdown-item, div.dropdown-item {
   padding: 0.3rem 1.0rem 0.3rem 0.8rem;
 }
 
-a.dropdown-item span, button.dropdown-item span, div.dropdown-item span {
+a.dropdown-item ng-icon, button.dropdown-item ng-icon, div.dropdown-item ng-icon {
-  padding-right: 0.8rem;
+  margin-right: 0.5rem;
+}
+
+ng-icon {
+  vertical-align: text-top;
 }
 
 
@@ -71,6 +75,6 @@ a.dropdown-item span.badge, button.dropdown-item span.badge {
   z-index: 999;
 }
 
-.show-btn-scroll-up{
+.show-btn-scroll-up {
   right: 1em;
 }

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

@@ -49,7 +49,7 @@
             <ng-container *ngIf="authenticationRequired && user.value">
               <li class="nav-item me-2 ms-2 navbar-text d-xl-block d-none">
              <span style="white-space: nowrap;">
-                <span class="oi oi-person"></span> {{user.value.name}}
+               <ng-icon name="ionPersonOutline" class="me-1"></ng-icon><span>{{user.value.name}}</span>
               </span>
               </li>
               <li class="nav-item divider-vertical  d-xl-block d-none">
@@ -68,7 +68,7 @@
                 <button id="button-alignment" dropdownToggle
                         type="button" class="btn btn-tertiary dropdown-toggle"
                         aria-controls="dropdown-alignment">
-                  <span class="oi oi-menu"></span>
+                  <ng-icon class="align-text-top" size="1.2em" name="ionMenuOutline"></ng-icon>
                   <span *ngIf="isAdmin() && notificationService.numberOfNotifications>0"
                         class="navbar-badge badge text-bg-warning">{{notificationService.numberOfNotifications}}</span>
                 </button>
@@ -79,9 +79,10 @@
                   <li role="menuitem" class="d-xl-none">
                     <div style="white-space: nowrap;" class="dropdown-item">
                       <ng-container *ngIf="authenticationRequired && user.value">
-                        <span class="oi oi-person"></span>{{user.value.name}}
+                        <ng-icon name="ionPersonOutline"></ng-icon>
+                        <span>{{user.value.name}}</span>
                       </ng-container>
-                      <app-language class="navbar-btn d-inline-block"></app-language>
+                      <app-language class="navbar-btn d-inline-block float-end"></app-language>
                     </div>
                   </li>
                   <li class="nav-item d-xl-none" *ngIf="showShare">
@@ -113,14 +114,14 @@
                     <li class="nav-item d-md-none"
                         *ngIf="link.type === NavigationLinkTypes.albums && isAlbumsAvailable()">
                       <a class="dropdown-item" [routerLink]="['/albums']" [class.active]="isLinkActive('/albums')">
-                        <span class="oi oi-grid-two-up"></span>
+                        <ng-icon name="ionAlbumsOutline"></ng-icon>
                         <ng-container i18n>Albums</ng-container>
                       </a>
                     </li>
                     <li class="nav-item d-md-none"
                         *ngIf="link.type === NavigationLinkTypes.faces && isFacesAvailable()">
                       <a class="dropdown-item" [routerLink]="['/faces']" [class.active]="isLinkActive('/faces')">
-                        <span class="oi oi-people"></span>
+                        <ng-icon name="ionPeopleOutline"></ng-icon>
                         <ng-container i18n>Faces</ng-container>
                       </a>
                     </li>
@@ -128,21 +129,21 @@
                       <a class="dropdown-item"
                          [routerLink]="['/gallery']"
                          [queryParams]="queryService.getParams()" [class.active]="isLinkActive('/gallery')">
-                        <span class="oi oi-image"></span>
+                        <ng-icon name="ionImagesOutline"></ng-icon>
                         <ng-container i18n>Gallery</ng-container>
                       </a>
                     </li>
                     <li class="nav-item d-md-none" *ngIf="link.type === NavigationLinkTypes.url">
                       <a class="dropdown-item" [href]="link.url" [class.active]="isLinkActive(link.url)">
-                        <span class="oi oi-external-link"></span>
+                        <ng-icon name="ionLinkOutline"></ng-icon>
-                        {{link.name}}
+                        <span>{{link.name}}</span>
                       </a>
                     </li>
                     <li class="nav-item d-md-none" *ngIf="link.type === NavigationLinkTypes.search">
                       <a class="dropdown-item" [routerLink]="['/search', link.SearchQuery | json]"
                          [class.active]="isSearchActive(link.SearchQuery)">
-                        <span class="oi oi-link-intact"></span>
+                        <ng-icon name="ionSearchOutline"></ng-icon>
-                        {{link.name}}
+                        <span>{{link.name}}</span>
                       </a>
                     </li>
                   </ng-container>
@@ -151,7 +152,7 @@
                   <li role="menuitem" dropdown [autoClose]="false"
                       placement="bottom left" container="body">
                     <a dropdownToggle class="dropdown-item">
-                      <span class="oi oi-command"></span>
+                      <ng-icon name="ionHammerOutline"></ng-icon>
                       <ng-container i18n>Tools</ng-container>
                     </a>
                     <ul class="dropdown-menu dropdown-menu-start" *dropdownMenu role="menu">
@@ -159,7 +160,7 @@
                       <li role="menuitem" *ngIf="isAdmin()">
                         <a class="dropdown-item"
                            [routerLink]="['/duplicates']">
-                          <span class="oi oi-layers"></span>
+                          <ng-icon name="ionCopyOutline"></ng-icon>
                           <ng-container i18n>Duplicates</ng-container>
                         </a>
                       </li>
@@ -180,7 +181,7 @@
                   </li>
                   <li role="menuitem" *ngIf="isAdmin()">
                     <a class="dropdown-item" [routerLink]="['/admin']">
-                      <span class="oi oi-wrench"></span>
+                      <ng-icon name="ionSettingsOutline"></ng-icon>
                       <span *ngIf="notificationService.numberOfNotifications>0"
                             class="badge rounded-pill position-absolute p-0 text-bg-warning">{{notificationService.numberOfNotifications}}</span>
                       <ng-container i18n>Settings</ng-container>
@@ -188,7 +189,7 @@
                   </li>
                   <li role="menuitem" *ngIf="authenticationRequired">
                     <button class="dropdown-item btn btn-link" (click)="logout()">
-                      <span class="oi oi-account-logout"></span>
+                      <ng-icon name="ionLogOutOutline"></ng-icon>
                       <ng-container i18n>Logout</ng-container>
                     </button>
                   </li>

src/frontend/app/ui/gallery/navigator/navigator.gallery.component.css

@@ -22,7 +22,6 @@
 .row {
   margin: 0;
   display: flex;
-  cursor: pointer;
 }
 
 nav {
@@ -38,7 +37,16 @@ nav {
   margin-left: 5px;
 }
 
-app-gallery-filter{
+app-gallery-filter {
   overflow-y: auto;
   overscroll-behavior: contain;
 }
+
+.btn-navigator{
+  border: none;
+}
+
+.btn-navigator:not(:hover) {
+  --bs-text-opacity: 1;
+  color: rgba(var(--bs-body-color-rgb), var(--bs-text-opacity)) !important;
+}

src/frontend/app/ui/gallery/navigator/navigator.gallery.component.html

@@ -28,9 +28,8 @@
 
       <ng-container *ngIf="config.Gallery.enableDownloadZip && isDirectory && ItemCount > 0">
         <a [href]="getDownloadZipLink()"
-           class="btn">
+           class="btn  btn-outline-secondary btn-navigator">
-         <span class="oi oi-data-transfer-download"
+          <ng-icon name="ionCloudDownloadOutline" title="download" i18n-title></ng-icon>
-               title="download" i18n-title></span>
         </a>
         <div class="divider">&nbsp;</div>
       </ng-container>
@@ -38,27 +37,27 @@
       <ng-container *ngIf="config.Gallery.enableDirectoryFlattening && isDirectory && authService.canSearch()">
         <a
           [routerLink]="['/search', getDirectoryFlattenSearchQuery()]"
-          class="btn">
+          class="btn btn-outline-secondary btn-navigator">
-         <span class="oi oi-fork"
+          <ng-icon name="ionGitBranchOutline"
-               title="Flatten directory" i18n-title></span>
+                   title="Flatten directory" i18n-title></ng-icon>
         </a>
         <div class="divider">&nbsp;</div>
       </ng-container>
       <ng-container *ngIf="ItemCount> 0">
-        <a class="btn"
+        <a class="btn btn-outline-secondary btn-navigator"
            [class.btn-secondary]="filterService.activeFilters.value.areFiltersActive"
            (click)="showFilters = ! showFilters">
-         <span class="oi oi-spreadsheet"
+          <ng-icon name="ionFunnelOutline"
-               title="Filters" i18n-title></span>
+                   title="Filters" i18n-title></ng-icon>
         </a>
         <div class="divider">&nbsp;</div>
       </ng-container>
       <div class="btn-group" dropdown #dropdown="bs-dropdown" placement="bottom right">
         <button id="button-alignment" dropdownToggle type="button"
-                class="btn dropdown-toggle"
+                class="btn dropdown-toggle  btn-outline-secondary btn-navigator"
                 [class.btn-secondary]="sortingService.sorting.value !== DefaultSorting"
-                aria-controls="sorting-dropdown"
+                aria-controls="sorting-dropdown">
-                [innerHTML]="sortingService.sorting.value | iconizeSorting">
+          <app-sorting-method-icon [method]="sortingService.sorting.value"></app-sorting-method-icon>
         </button>
         <ul id="sorting-dropdown" *dropdownMenu class="dropdown-menu dropdown-menu-right"
             role="menu" aria-labelledby="button-alignment">
@@ -66,7 +65,7 @@
               *ngFor="let type of sortingMethodsType"
               (click)="setSorting(type.key)">
             <div class="col-3">
-              <div [outerHTML]="type.key | iconizeSorting"></div>
+              <app-sorting-method-icon [method]="type.key"></app-sorting-method-icon>
             </div>
             <div class="col-9">{{type.key | stringifySorting}}</div>
           </li>

src/frontend/app/ui/gallery/share/share.gallery.component.css

@@ -11,18 +11,17 @@
   padding-bottom: 1px;
 }
 
-#shareButton span {
+ng-icon{
-  padding-right: 0.3rem;
+  vertical-align: text-top;
 }
 
-
 a.dropdown-item, button.dropdown-item, div.dropdown-item {
   padding: 0.3rem 1.0rem 0.3rem 0.8rem;
   cursor: pointer;
 }
 
-a.dropdown-item span, button.dropdown-item span, div.dropdown-item span {
+a.dropdown-item ng-icon, button.dropdown-item ng-icon, div.dropdown-item ng-icon {
-  padding-right: 0.8rem;
+  margin-right: 0.5rem;
 }
 
 a.list-shares-button {

src/frontend/app/ui/gallery/share/share.gallery.component.html

@@ -2,12 +2,12 @@
         style="white-space:nowrap"
         *ngIf="!dropDownItem"
         type="button" [disabled]="!enabled" (click)="openModal(shareModal)">
-  <span class="oi oi-share"></span>
+  <ng-icon name="ionShareSocialOutline" class="me-1"></ng-icon>
   <ng-container i18n>Share</ng-container>
 </button>
 
 <a class="dropdown-item" (click)="openModal(shareModal)" *ngIf="dropDownItem">
-  <span class="oi oi-share"></span>
+  <ng-icon name="ionShareSocialOutline"></ng-icon>
   <ng-container i18n>Share</ng-container>
 </a>
 
@@ -134,7 +134,7 @@
       <span class="badge text-bg-secondary me-1">{{activeShares.length}}</span>
       <ng-container i18n>active share(s) for this folder.
       </ng-container>
-      <span class="oi oi-chevron-right ms-1"></span>
+      <ng-icon name="ionChevronForwardOutline" class="ms-1"></ng-icon>
     </a>
     <table class="table table-hover table-sm" *ngIf="showSharingList">
       <thead>
@@ -154,7 +154,7 @@
           <button (click)="deleteSharing(share)"
                   [disabled]="share.sharingKey == sharing?.sharingKey"
                   class="btn btn-danger float-end">
-            <span class="oi oi-trash" aria-hidden="true" aria-label="Delete"></span>
+            <ng-icon name="ionTrashOutline" title="Delete" i18n-title></ng-icon>
           </button>
         </td>
       </tr>

src/frontend/app/ui/sorting-method-icon/sorting-method-icon.component.html

@@ -0,0 +1,37 @@
+<ng-container [ngSwitch]="method">
+  <ng-container *ngSwitchCase="SortingMethods.descName">
+    <ng-icon name="ionArrowDownOutline"></ng-icon>
+    <span>A</span>
+  </ng-container>
+  <ng-container *ngSwitchCase="SortingMethods.ascName">
+    <ng-icon name="ionArrowUpOutline"></ng-icon>
+    <span>A</span>
+  </ng-container>
+  <ng-container *ngSwitchCase="SortingMethods.descRating">
+    <ng-icon name="ionArrowDownOutline"></ng-icon>
+    <ng-icon name="ionStarOutline"></ng-icon>
+  </ng-container>
+  <ng-container *ngSwitchCase="SortingMethods.ascRating">
+    <ng-icon name="ionArrowUpOutline"></ng-icon>
+    <ng-icon name="ionStarOutline"></ng-icon>
+  </ng-container>
+  <ng-container *ngSwitchCase="SortingMethods.descDate">
+    <ng-icon name="ionArrowDownOutline"></ng-icon>
+    <ng-icon name="ionCalendarOutline"></ng-icon>
+  </ng-container>
+  <ng-container *ngSwitchCase="SortingMethods.ascDate">
+    <ng-icon name="ionArrowUpOutline"></ng-icon>
+    <ng-icon name="ionCalendarOutline"></ng-icon>
+  </ng-container>
+  <ng-container *ngSwitchCase="SortingMethods.descPersonCount">
+    <ng-icon name="ionArrowDownOutline"></ng-icon>
+    <ng-icon name="ionPersonOutline"></ng-icon>
+  </ng-container>
+  <ng-container *ngSwitchCase="SortingMethods.ascPersonCount">
+    <ng-icon name="ionArrowUpOutline"></ng-icon>
+    <ng-icon name="ionPersonOutline"></ng-icon>
+  </ng-container>
+  <ng-container *ngSwitchCase="SortingMethods.random">
+    <ng-icon name="ionShuffleOutline"></ng-icon>
+  </ng-container>
+</ng-container>

src/frontend/app/ui/sorting-method-icon/sorting-method-icon.component.ts

@@ -0,0 +1,12 @@
+import {Component, Input} from '@angular/core';
+import {SortingMethods} from '../../../../common/entities/SortingMethods';
+
+@Component({
+  selector: 'app-sorting-method-icon',
+  templateUrl: './sorting-method-icon.component.html',
+  styleUrls: ['./sorting-method-icon.component.css']
+})
+export class SortingMethodIconComponent {
+  @Input() method: SortingMethods;
+  SortingMethods = SortingMethods;
+}

src/frontend/styles.css

@@ -33,7 +33,7 @@ Creating btn-tertiary until bootstrap supports it our of the box.
 /*
 This is mostly btn-light
 */
-.btn-tertiary, [data-bs-theme=light] .btn-tertiary   {
+.btn-tertiary, [data-bs-theme=light] .btn-tertiary {
   --bs-btn-color: #000;
   --bs-btn-bg: var(--bs-body-bg);
   --bs-btn-border-color: var(--bs-border-color);
@@ -50,10 +50,20 @@ This is mostly btn-light
   --bs-btn-disabled-border-color: #f8f9fa;
 }
 
+ng-icon {
+  font-size: 1.15em
+}
+
+ng-icon svg {
+  vertical-align: unset;
+  --ng-icon__stroke-width: 40;
+}
+
+
 /*
 This is mostly btn-dark + border fix
 */
-[data-bs-theme=dark] .btn-tertiary   {
+[data-bs-theme=dark] .btn-tertiary {
   --bs-btn-color: #fff;
   --bs-btn-bg: var(--bs-body-bg);
   --bs-btn-border-color: var(--bs-border-color);
@@ -68,7 +78,7 @@ This is mostly btn-dark + border fix
   --bs-btn-disabled-color: #fff;
   --bs-btn-disabled-bg: #212529;
   --bs-btn-disabled-border-color: #212529;
- /* border: var(--bs-border-width) solid var(--bs-border-color);*/
+  /* border: var(--bs-border-width) solid var(--bs-border-color);*/
 }