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

#587
2024-11-03 21:04:03 +08:00 · 2023-08-20 10:19:50 +02:00 · 2023-08-20 10:19:50 +02:00 · 6a004c2abb
commit 6a004c2abb
parent d64670751c
15 changed files with 197 additions and 76 deletions
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
--- a/src/frontend/app/app.module.ts
+++ b/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},
--- a/src/frontend/app/icon.component.ts
+++ b/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"
--- a/src/frontend/app/pipes/IconizeSortingMethod.ts
+++ b/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>';
-    }
-  }
-}
-
--- a/src/frontend/app/ui/frame/frame.component.css
+++ b/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 {
-  padding-right: 0.8rem;
+a.dropdown-item ng-icon, button.dropdown-item ng-icon, div.dropdown-item ng-icon {
+  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;
 }
--- a/src/frontend/app/ui/frame/frame.component.html
+++ b/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>
-                        {{link.name}}
+                        <ng-icon name="ionLinkOutline"></ng-icon>
+                        <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>
-                        {{link.name}}
+                        <ng-icon name="ionSearchOutline"></ng-icon>
+                        <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>
--- a/src/frontend/app/ui/gallery/navigator/navigator.gallery.component.css
+++ b/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;
+}
--- a/src/frontend/app/ui/gallery/navigator/navigator.gallery.component.html
+++ b/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">
-         <span class="oi oi-data-transfer-download"
-               title="download" i18n-title></span>
+           class="btn  btn-outline-secondary btn-navigator">
+          <ng-icon name="ionCloudDownloadOutline" title="download" i18n-title></ng-icon>
        </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">
-         <span class="oi oi-fork"
-               title="Flatten directory" i18n-title></span>
+          class="btn btn-outline-secondary btn-navigator">
+          <ng-icon name="ionGitBranchOutline"
+                   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"
-               title="Filters" i18n-title></span>
+          <ng-icon name="ionFunnelOutline"
+                   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"
-                [innerHTML]="sortingService.sorting.value | iconizeSorting">
+                aria-controls="sorting-dropdown">
+          <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>
--- a/src/frontend/app/ui/gallery/share/share.gallery.component.css
+++ b/src/frontend/app/ui/gallery/share/share.gallery.component.css
@ -11,18 +11,17 @@
  padding-bottom: 1px;
 }

-#shareButton span {
-  padding-right: 0.3rem;
+ng-icon{
+  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 {
-  padding-right: 0.8rem;
+a.dropdown-item ng-icon, button.dropdown-item ng-icon, div.dropdown-item ng-icon {
+  margin-right: 0.5rem;
 }

 a.list-shares-button {
--- a/src/frontend/app/ui/gallery/share/share.gallery.component.html
+++ b/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>
--- a/src/frontend/app/ui/sorting-method-icon/sorting-method-icon.component.css
+++ b/src/frontend/app/ui/sorting-method-icon/sorting-method-icon.component.css
--- a/src/frontend/app/ui/sorting-method-icon/sorting-method-icon.component.html
+++ b/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>
--- a/src/frontend/app/ui/sorting-method-icon/sorting-method-icon.component.ts
+++ b/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;
+}
--- a/src/frontend/styles.css
+++ b/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);*/
 }