Feature/upgrade ionicons to version 8 (#5090)

* Upgrade ionicons to version 8

* Update changelog

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Renamed `Settings` to `settings` in the `User` database schema
 - Improved the language localization for Dutch (`nl`)
 - Improved the language localization for Español (`es`)
+- Upgraded `ionicons` from version `7.4.0` to `8.0.10`
 
 ## 2.178.0 - 2025-07-05
 

apps/client/project.json

@@ -179,9 +179,6 @@
           {
             "command": "shx mkdir -p dist/apps/client/assets"
           },
-          {
-            "command": "shx mkdir -p dist/apps/client/ionicons"
-          },
           {
             "command": "shx cp -r apps/client/src/assets/* dist/apps/client/assets"
           },
@@ -197,15 +194,6 @@
           {
             "command": "shx cp apps/client/src/assets/robots.txt dist/apps/client"
           },
-          {
-            "command": "shx cp node_modules/ionicons/dist/index.js dist/apps/client"
-          },
-          {
-            "command": "shx cp node_modules/ionicons/dist/ionicons.js dist/apps/client"
-          },
-          {
-            "command": "shx cp -r node_modules/ionicons/dist/ionicons/* dist/apps/client/ionicons"
-          },
           {
             "command": "shx cp CHANGELOG.md dist/apps/client/assets"
           },

apps/client/proxy.conf.json

@@ -6,9 +6,5 @@
   "/assets": {
     "target": "http://0.0.0.0:3333",
     "secure": false
-  },
-  "/ionicons": {
-    "target": "http://0.0.0.0:3333",
-    "secure": false
   }
 }

apps/client/src/app/app.component.ts

@@ -25,6 +25,8 @@ import {
   Router
 } from '@angular/router';
 import { DataSource } from '@prisma/client';
+import { addIcons } from 'ionicons';
+import { openOutline } from 'ionicons/icons';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
@@ -116,6 +118,8 @@ export class AppComponent implements OnDestroy, OnInit {
           });
         }
       });
+
+    addIcons({ openOutline });
   }
 
   public ngOnInit() {

apps/client/src/app/app.module.ts

@@ -19,6 +19,8 @@ import { MatTooltipModule } from '@angular/material/tooltip';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ServiceWorkerModule } from '@angular/service-worker';
+import { provideIonicAngular } from '@ionic/angular/standalone';
+import { IonIcon } from '@ionic/angular/standalone';
 import { provideMarkdown } from 'ngx-markdown';
 import { provideNgxSkeletonLoader } from 'ngx-skeleton-loader';
 import { NgxStripeModule, STRIPE_PUBLISHABLE_KEY } from 'ngx-stripe';
@@ -50,6 +52,7 @@ export function NgxStripeFactory(): string {
     GfLogoComponent,
     GfNotificationModule,
     GfSubscriptionInterstitialDialogModule,
+    IonIcon,
     MatAutocompleteModule,
     MatChipsModule,
     MatNativeDateModule,
@@ -66,6 +69,7 @@ export function NgxStripeFactory(): string {
     httpResponseInterceptorProviders,
     LanguageService,
     provideHttpClient(withInterceptorsFromDi()),
+    provideIonicAngular(),
     provideMarkdown(),
     provideNgxSkeletonLoader(),
     {

apps/client/src/app/components/access-table/access-table.component.ts

@@ -14,6 +14,13 @@ import {
 } from '@angular/core';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableDataSource } from '@angular/material/table';
+import { addIcons } from 'ionicons';
+import {
+  ellipsisHorizontal,
+  linkOutline,
+  lockClosedOutline,
+  lockOpenOutline
+} from 'ionicons/icons';
 import ms from 'ms';
 
 @Component({
@@ -38,7 +45,14 @@ export class AccessTableComponent implements OnChanges {
     private clipboard: Clipboard,
     private notificationService: NotificationService,
     private snackBar: MatSnackBar
-  ) {}
+  ) {
+    addIcons({
+      ellipsisHorizontal,
+      linkOutline,
+      lockClosedOutline,
+      lockOpenOutline
+    });
+  }
 
   public ngOnChanges() {
     this.displayedColumns = ['alias', 'grantee', 'type', 'details'];

apps/client/src/app/components/access-table/access-table.module.ts

@@ -5,6 +5,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatTableModule } from '@angular/material/table';
 import { RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
 
 import { AccessTableComponent } from './access-table.component';
 
@@ -14,6 +15,7 @@ import { AccessTableComponent } from './access-table.component';
   imports: [
     ClipboardModule,
     CommonModule,
+    IonIcon,
     MatButtonModule,
     MatMenuModule,
     MatTableModule,

apps/client/src/app/components/account-detail-dialog/account-detail-dialog.component.ts

@@ -27,6 +27,12 @@ import { MatTableDataSource } from '@angular/material/table';
 import { Router } from '@angular/router';
 import { Big } from 'big.js';
 import { format, parseISO } from 'date-fns';
+import { addIcons } from 'ionicons';
+import {
+  cashOutline,
+  swapVerticalOutline,
+  walletOutline
+} from 'ionicons/icons';
 import { isNumber } from 'lodash';
 import { forkJoin, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -86,6 +92,8 @@ export class AccountDetailDialog implements OnDestroy, OnInit {
           this.changeDetectorRef.markForCheck();
         }
       });
+
+    addIcons({ cashOutline, swapVerticalOutline, walletOutline });
   }
 
   public ngOnInit() {

apps/client/src/app/components/account-detail-dialog/account-detail-dialog.module.ts

@@ -11,6 +11,7 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatTabsModule } from '@angular/material/tabs';
+import { IonIcon } from '@ionic/angular/standalone';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { AccountDetailDialog } from './account-detail-dialog.component';
@@ -26,6 +27,7 @@ import { AccountDetailDialog } from './account-detail-dialog.component';
     GfHoldingsTableComponent,
     GfInvestmentChartModule,
     GfValueComponent,
+    IonIcon,
     MatButtonModule,
     MatDialogModule,
     MatTabsModule,

apps/client/src/app/components/accounts-table/accounts-table.component.ts

@@ -16,6 +16,15 @@ import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { Router } from '@angular/router';
 import { Account as AccountModel } from '@prisma/client';
+import { addIcons } from 'ionicons';
+import {
+  arrowRedoOutline,
+  createOutline,
+  documentTextOutline,
+  ellipsisHorizontalOutline,
+  eyeOffOutline,
+  trashOutline
+} from 'ionicons/icons';
 import { get } from 'lodash';
 import { Subject, Subscription } from 'rxjs';
 
@@ -58,7 +67,16 @@ export class AccountsTableComponent implements OnChanges, OnDestroy {
   public constructor(
     private notificationService: NotificationService,
     private router: Router
-  ) {}
+  ) {
+    addIcons({
+      arrowRedoOutline,
+      createOutline,
+      documentTextOutline,
+      ellipsisHorizontalOutline,
+      eyeOffOutline,
+      trashOutline
+    });
+  }
 
   public ngOnChanges() {
     this.displayedColumns = ['status', 'account', 'platform'];

apps/client/src/app/components/accounts-table/accounts-table.module.ts

@@ -8,6 +8,7 @@ import { MatMenuModule } from '@angular/material/menu';
 import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { AccountsTableComponent } from './accounts-table.component';
@@ -19,6 +20,7 @@ import { AccountsTableComponent } from './accounts-table.component';
     CommonModule,
     GfEntityLogoComponent,
     GfValueComponent,
+    IonIcon,
     MatButtonModule,
     MatMenuModule,
     MatSortModule,

apps/client/src/app/components/admin-jobs/admin-jobs.component.ts

@@ -20,6 +20,20 @@ import {
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { MatTableDataSource } from '@angular/material/table';
 import { JobStatus } from 'bull';
+import { addIcons } from 'ionicons';
+import {
+  alertCircleOutline,
+  cafeOutline,
+  checkmarkCircleOutline,
+  chevronDownCircleOutline,
+  chevronUpCircleOutline,
+  ellipsisHorizontal,
+  ellipsisVertical,
+  pauseOutline,
+  playOutline,
+  removeCircleOutline,
+  timeOutline
+} from 'ionicons/icons';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -76,6 +90,20 @@ export class AdminJobsComponent implements OnDestroy, OnInit {
           );
         }
       });
+
+    addIcons({
+      alertCircleOutline,
+      cafeOutline,
+      checkmarkCircleOutline,
+      chevronDownCircleOutline,
+      chevronUpCircleOutline,
+      ellipsisHorizontal,
+      ellipsisVertical,
+      pauseOutline,
+      playOutline,
+      removeCircleOutline,
+      timeOutline
+    });
   }
 
   public ngOnInit() {

apps/client/src/app/components/admin-jobs/admin-jobs.module.ts

@@ -5,6 +5,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatSelectModule } from '@angular/material/select';
 import { MatTableModule } from '@angular/material/table';
+import { IonIcon } from '@ionic/angular/standalone';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { AdminJobsComponent } from './admin-jobs.component';
@@ -14,6 +15,7 @@ import { AdminJobsComponent } from './admin-jobs.component';
   imports: [
     CommonModule,
     FormsModule,
+    IonIcon,
     MatButtonModule,
     MatMenuModule,
     MatSelectModule,

apps/client/src/app/components/admin-market-data/admin-market-data.component.ts

@@ -33,6 +33,16 @@ import { MatTableDataSource } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router';
 import { AssetSubClass, DataSource, SymbolProfile } from '@prisma/client';
 import { isUUID } from 'class-validator';
+import { addIcons } from 'ionicons';
+import {
+  addOutline,
+  banOutline,
+  createOutline,
+  documentTextOutline,
+  ellipsisHorizontal,
+  ellipsisVertical,
+  trashOutline
+} from 'ionicons/icons';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
 import { distinctUntilChanged, switchMap, takeUntil } from 'rxjs/operators';
@@ -194,6 +204,16 @@ export class AdminMarketDataComponent
 
         this.loadData();
       });
+
+    addIcons({
+      addOutline,
+      banOutline,
+      createOutline,
+      documentTextOutline,
+      ellipsisHorizontal,
+      ellipsisVertical,
+      trashOutline
+    });
   }
 
   public ngAfterViewInit() {

apps/client/src/app/components/admin-market-data/admin-market-data.module.ts

@@ -12,6 +12,7 @@ import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { AdminMarketDataComponent } from './admin-market-data.component';
@@ -29,6 +30,7 @@ import { GfCreateAssetProfileDialogModule } from './create-asset-profile-dialog/
     GfPremiumIndicatorComponent,
     GfSymbolModule,
     GfValueComponent,
+    IonIcon,
     MatButtonModule,
     MatCheckboxModule,
     MatMenuModule,

apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.component.ts

@@ -47,6 +47,8 @@ import {
 } from '@prisma/client';
 import { format } from 'date-fns';
 import { StatusCodes } from 'http-status-codes';
+import { addIcons } from 'ionicons';
+import { createOutline, ellipsisVertical } from 'ionicons/icons';
 import ms from 'ms';
 import { EMPTY, Subject } from 'rxjs';
 import { catchError, takeUntil } from 'rxjs/operators';
@@ -166,7 +168,9 @@ export class AssetProfileDialog implements OnDestroy, OnInit {
     private notificationService: NotificationService,
     private snackBar: MatSnackBar,
     private userService: UserService
-  ) {}
+  ) {
+    addIcons({ createOutline, ellipsisVertical });
+  }
 
   public get canEditAssetProfileIdentifier() {
     return (

apps/client/src/app/components/admin-market-data/asset-profile-dialog/asset-profile-dialog.module.ts

@@ -19,6 +19,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
+import { IonIcon } from '@ionic/angular/standalone';
 
 import { AssetProfileDialog } from './asset-profile-dialog.component';
 
@@ -34,6 +35,7 @@ import { AssetProfileDialog } from './asset-profile-dialog.component';
     GfPortfolioProportionChartComponent,
     GfSymbolAutocompleteComponent,
     GfValueComponent,
+    IonIcon,
     MatButtonModule,
     MatCheckboxModule,
     MatDialogModule,

apps/client/src/app/components/admin-overview/admin-overview.component.ts

@@ -28,6 +28,14 @@ import {
   formatDistanceToNowStrict,
   parseISO
 } from 'date-fns';
+import { addIcons } from 'ionicons';
+import {
+  closeCircleOutline,
+  ellipsisHorizontal,
+  informationCircleOutline,
+  syncOutline,
+  trashOutline
+} from 'ionicons/icons';
 import ms, { StringValue } from 'ms';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -94,6 +102,14 @@ export class AdminOverviewComponent implements OnDestroy, OnInit {
           );
         }
       });
+
+    addIcons({
+      closeCircleOutline,
+      ellipsisHorizontal,
+      informationCircleOutline,
+      syncOutline,
+      trashOutline
+    });
   }
 
   public ngOnInit() {

apps/client/src/app/components/admin-overview/admin-overview.module.ts

@@ -11,6 +11,7 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
 
 import { AdminOverviewComponent } from './admin-overview.component';
 
@@ -21,6 +22,7 @@ import { AdminOverviewComponent } from './admin-overview.component';
     CommonModule,
     FormsModule,
     GfValueComponent,
+    IonIcon,
     MatButtonModule,
     MatCardModule,
     MatMenuModule,

apps/client/src/app/components/admin-platform/admin-platform.component.ts

@@ -19,6 +19,12 @@ import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Platform } from '@prisma/client';
+import { addIcons } from 'ionicons';
+import {
+  createOutline,
+  ellipsisHorizontal,
+  trashOutline
+} from 'ionicons/icons';
 import { get } from 'lodash';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject, takeUntil } from 'rxjs';
@@ -70,6 +76,8 @@ export class AdminPlatformComponent implements OnInit, OnDestroy {
           }
         }
       });
+
+    addIcons({ createOutline, ellipsisHorizontal, trashOutline });
   }
 
   public ngOnInit() {

apps/client/src/app/components/admin-platform/admin-platform.module.ts

@@ -7,6 +7,7 @@ import { MatMenuModule } from '@angular/material/menu';
 import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
 
 import { AdminPlatformComponent } from './admin-platform.component';
 import { GfCreateOrUpdatePlatformDialogModule } from './create-or-update-platform-dialog/create-or-update-platform-dialog.module';
@@ -18,6 +19,7 @@ import { GfCreateOrUpdatePlatformDialogModule } from './create-or-update-platfor
     CommonModule,
     GfCreateOrUpdatePlatformDialogModule,
     GfEntityLogoComponent,
+    IonIcon,
     MatButtonModule,
     MatMenuModule,
     MatSortModule,

apps/client/src/app/components/admin-settings/admin-settings.component.ts

@@ -20,6 +20,8 @@ import {
   OnInit
 } from '@angular/core';
 import { MatTableDataSource } from '@angular/material/table';
+import { addIcons } from 'ionicons';
+import { ellipsisHorizontal, trashOutline } from 'ionicons/icons';
 import { catchError, filter, of, Subject, takeUntil } from 'rxjs';
 
 @Component({
@@ -53,7 +55,9 @@ export class AdminSettingsComponent implements OnDestroy, OnInit {
     private dataService: DataService,
     private notificationService: NotificationService,
     private userService: UserService
-  ) {}
+  ) {
+    addIcons({ ellipsisHorizontal, trashOutline });
+  }
 
   public ngOnInit() {
     this.userService.stateChanged

apps/client/src/app/components/admin-settings/admin-settings.module.ts

@@ -13,6 +13,7 @@ import { MatMenuModule } from '@angular/material/menu';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatTableModule } from '@angular/material/table';
 import { RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { AdminSettingsComponent } from './admin-settings.component';
@@ -27,6 +28,7 @@ import { AdminSettingsComponent } from './admin-settings.component';
     GfEntityLogoComponent,
     GfPremiumIndicatorComponent,
     GfValueComponent,
+    IonIcon,
     MatButtonModule,
     MatCardModule,
     MatMenuModule,

apps/client/src/app/components/admin-tag/admin-tag.component.ts

@@ -18,6 +18,12 @@ import { MatSort } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Tag } from '@prisma/client';
+import { addIcons } from 'ionicons';
+import {
+  createOutline,
+  ellipsisHorizontal,
+  trashOutline
+} from 'ionicons/icons';
 import { get } from 'lodash';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject, takeUntil } from 'rxjs';
@@ -68,6 +74,8 @@ export class AdminTagComponent implements OnInit, OnDestroy {
           }
         }
       });
+
+    addIcons({ createOutline, ellipsisHorizontal, trashOutline });
   }
 
   public ngOnInit() {

apps/client/src/app/components/admin-tag/admin-tag.module.ts

@@ -5,6 +5,7 @@ import { MatMenuModule } from '@angular/material/menu';
 import { MatSortModule } from '@angular/material/sort';
 import { MatTableModule } from '@angular/material/table';
 import { RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
 
 import { AdminTagComponent } from './admin-tag.component';
 import { GfCreateOrUpdateTagDialogModule } from './create-or-update-tag-dialog/create-or-update-tag-dialog.module';
@@ -15,6 +16,7 @@ import { GfCreateOrUpdateTagDialogModule } from './create-or-update-tag-dialog/c
   imports: [
     CommonModule,
     GfCreateOrUpdateTagDialogModule,
+    IonIcon,
     MatButtonModule,
     MatMenuModule,
     MatSortModule,

apps/client/src/app/components/admin-users/admin-users.component.ts

@@ -18,6 +18,13 @@ import {
   formatDistanceToNowStrict,
   parseISO
 } from 'date-fns';
+import { addIcons } from 'ionicons';
+import {
+  contractOutline,
+  ellipsisHorizontal,
+  keyOutline,
+  trashOutline
+} from 'ionicons/icons';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -107,6 +114,8 @@ export class AdminUsersComponent implements OnDestroy, OnInit {
           );
         }
       });
+
+    addIcons({ contractOutline, ellipsisHorizontal, keyOutline, trashOutline });
   }
 
   public ngOnInit() {

apps/client/src/app/components/admin-users/admin-users.module.ts

@@ -7,6 +7,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatTableModule } from '@angular/material/table';
+import { IonIcon } from '@ionic/angular/standalone';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { AdminUsersComponent } from './admin-users.component';
@@ -18,6 +19,7 @@ import { AdminUsersComponent } from './admin-users.component';
     CommonModule,
     GfPremiumIndicatorComponent,
     GfValueComponent,
+    IonIcon,
     MatButtonModule,
     MatMenuModule,
     MatPaginatorModule,

apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts

@@ -40,6 +40,8 @@ import {
 } from 'chart.js';
 import 'chartjs-adapter-date-fns';
 import annotationPlugin from 'chartjs-plugin-annotation';
+import { addIcons } from 'ionicons';
+import { arrowForwardOutline } from 'ionicons/icons';
 
 @Component({
   selector: 'gf-benchmark-comparator',
@@ -80,6 +82,8 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
 
     Tooltip.positioners['top'] = (_elements, position: TooltipPosition) =>
       getTooltipPositionerMapTop(this.chart, position);
+
+    addIcons({ arrowForwardOutline });
   }
 
   public ngOnChanges() {

apps/client/src/app/components/benchmark-comparator/benchmark-comparator.module.ts

@@ -5,6 +5,7 @@ import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatSelectModule } from '@angular/material/select';
 import { RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { BenchmarkComparatorComponent } from './benchmark-comparator.component';
@@ -16,6 +17,7 @@ import { BenchmarkComparatorComponent } from './benchmark-comparator.component';
     CommonModule,
     FormsModule,
     GfPremiumIndicatorComponent,
+    IonIcon,
     MatSelectModule,
     NgxSkeletonLoaderModule,
     ReactiveFormsModule,

apps/client/src/app/components/dialog-footer/dialog-footer.component.ts

@@ -5,6 +5,8 @@ import {
   Input,
   Output
 } from '@angular/core';
+import { addIcons } from 'ionicons';
+import { close } from 'ionicons/icons';
 
 @Component({
   host: { class: 'justify-content-center' },
@@ -19,6 +21,10 @@ export class DialogFooterComponent {
 
   @Output() closeButtonClicked = new EventEmitter<void>();
 
+  public constructor() {
+    addIcons({ close });
+  }
+
   public onClickCloseButton() {
     this.closeButtonClicked.emit();
   }

apps/client/src/app/components/dialog-footer/dialog-footer.module.ts

@@ -1,13 +1,14 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
+import { IonIcon } from '@ionic/angular/standalone';
 
 import { DialogFooterComponent } from './dialog-footer.component';
 
 @NgModule({
   declarations: [DialogFooterComponent],
   exports: [DialogFooterComponent],
-  imports: [CommonModule, MatButtonModule],
+  imports: [CommonModule, IonIcon, MatButtonModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfDialogFooterModule {}

apps/client/src/app/components/dialog-header/dialog-header.component.ts

@@ -5,6 +5,8 @@ import {
   Input,
   Output
 } from '@angular/core';
+import { addIcons } from 'ionicons';
+import { close } from 'ionicons/icons';
 
 @Component({
   host: { class: 'justify-content-center' },
@@ -21,6 +23,10 @@ export class DialogHeaderComponent {
 
   @Output() closeButtonClicked = new EventEmitter<void>();
 
+  public constructor() {
+    addIcons({ close });
+  }
+
   public onClickCloseButton() {
     this.closeButtonClicked.emit();
   }

apps/client/src/app/components/dialog-header/dialog-header.module.ts

@@ -1,13 +1,14 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
+import { IonIcon } from '@ionic/angular/standalone';
 
 import { DialogHeaderComponent } from './dialog-header.component';
 
 @NgModule({
   declarations: [DialogHeaderComponent],
   exports: [DialogHeaderComponent],
-  imports: [CommonModule, MatButtonModule],
+  imports: [CommonModule, IonIcon, MatButtonModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfDialogHeaderModule {}

apps/client/src/app/components/header/header.component.ts

@@ -29,6 +29,16 @@ import {
 import { MatDialog } from '@angular/material/dialog';
 import { MatMenuTrigger } from '@angular/material/menu';
 import { Router } from '@angular/router';
+import { addIcons } from 'ionicons';
+import {
+  closeOutline,
+  logoGithub,
+  menuOutline,
+  optionsOutline,
+  personCircleOutline,
+  radioButtonOffOutline,
+  radioButtonOnOutline
+} from 'ionicons/icons';
 import { EMPTY, Subject } from 'rxjs';
 import { catchError, takeUntil } from 'rxjs/operators';
 
@@ -116,6 +126,16 @@ export class HeaderComponent implements OnChanges {
       .subscribe((impersonationId) => {
         this.impersonationId = impersonationId;
       });
+
+    addIcons({
+      closeOutline,
+      logoGithub,
+      menuOutline,
+      optionsOutline,
+      personCircleOutline,
+      radioButtonOffOutline,
+      radioButtonOnOutline
+    });
   }
 
   public ngOnChanges() {

apps/client/src/app/components/header/header.module.ts

@@ -10,6 +10,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
 
 import { HeaderComponent } from './header.component';
 
@@ -21,6 +22,7 @@ import { HeaderComponent } from './header.component';
     GfAssistantComponent,
     GfLogoComponent,
     GfPremiumIndicatorComponent,
+    IonIcon,
     LoginWithAccessTokenDialogModule,
     MatBadgeModule,
     MatButtonModule,

apps/client/src/app/components/holding-detail-dialog/holding-detail-dialog.component.ts

@@ -47,8 +47,17 @@ import { SortDirection } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { MatTabsModule } from '@angular/material/tabs';
 import { Router } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
 import { Account, MarketData, Tag } from '@prisma/client';
 import { format, isSameMonth, isToday, parseISO } from 'date-fns';
+import { addIcons } from 'ionicons';
+import {
+  flagOutline,
+  readerOutline,
+  serverOutline,
+  swapVerticalOutline,
+  walletOutline
+} from 'ionicons/icons';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { Subject } from 'rxjs';
 import { switchMap, takeUntil } from 'rxjs/operators';
@@ -70,6 +79,7 @@ import { HoldingDetailDialogParams } from './interfaces/interfaces';
     GfPortfolioProportionChartComponent,
     GfTagsSelectorComponent,
     GfValueComponent,
+    IonIcon,
     MatButtonModule,
     MatChipsModule,
     MatDialogModule,
@@ -140,7 +150,15 @@ export class GfHoldingDetailDialogComponent implements OnDestroy, OnInit {
     private formBuilder: FormBuilder,
     private router: Router,
     private userService: UserService
-  ) {}
+  ) {
+    addIcons({
+      flagOutline,
+      readerOutline,
+      serverOutline,
+      swapVerticalOutline,
+      walletOutline
+    });
+  }
 
   public ngOnInit() {
     this.activityForm = this.formBuilder.group({

apps/client/src/app/components/home-holdings/home-holdings.component.ts

@@ -14,6 +14,8 @@ import { HoldingType, HoldingsViewMode } from '@ghostfolio/common/types';
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { FormControl } from '@angular/forms';
 import { Router } from '@angular/router';
+import { addIcons } from 'ionicons';
+import { gridOutline, reorderFourOutline } from 'ionicons/icons';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -53,7 +55,9 @@ export class HomeHoldingsComponent implements OnDestroy, OnInit {
     private impersonationStorageService: ImpersonationStorageService,
     private router: Router,
     private userService: UserService
-  ) {}
+  ) {
+    addIcons({ gridOutline, reorderFourOutline });
+  }
 
   public ngOnInit() {
     this.deviceType = this.deviceService.getDeviceInfo().deviceType;

apps/client/src/app/components/home-holdings/home-holdings.module.ts

@@ -8,6 +8,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
 
 import { HomeHoldingsComponent } from './home-holdings.component';
 
@@ -19,6 +20,7 @@ import { HomeHoldingsComponent } from './home-holdings.component';
     GfHoldingsTableComponent,
     GfToggleModule,
     GfTreemapChartComponent,
+    IonIcon,
     MatButtonModule,
     MatButtonToggleModule,
     ReactiveFormsModule,

apps/client/src/app/components/home-watchlist/home-watchlist.component.ts

@@ -23,6 +23,9 @@ import {
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { addOutline } from 'ionicons/icons';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -36,6 +39,7 @@ import { CreateWatchlistItemDialogParams } from './create-watchlist-item-dialog/
     CommonModule,
     GfBenchmarkComponent,
     GfPremiumIndicatorComponent,
+    IonIcon,
     MatButtonModule,
     RouterModule
   ],
@@ -103,6 +107,8 @@ export class HomeWatchlistComponent implements OnDestroy, OnInit {
           this.changeDetectorRef.markForCheck();
         }
       });
+
+    addIcons({ addOutline });
   }
 
   public ngOnInit() {

apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.component.ts

@@ -9,6 +9,8 @@ import { ChangeDetectionStrategy, Component, Inject } from '@angular/core';
 import { MatCheckboxChange } from '@angular/material/checkbox';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { Router } from '@angular/router';
+import { addIcons } from 'ionicons';
+import { eyeOffOutline, eyeOutline } from 'ionicons/icons';
 
 @Component({
   selector: 'gf-login-with-access-token-dialog',
@@ -27,7 +29,9 @@ export class LoginWithAccessTokenDialog {
     private router: Router,
     private settingsStorageService: SettingsStorageService,
     private tokenStorageService: TokenStorageService
-  ) {}
+  ) {
+    addIcons({ eyeOffOutline, eyeOutline });
+  }
 
   public onChangeStaySignedIn(aValue: MatCheckboxChange) {
     this.settingsStorageService.setSetting(

apps/client/src/app/components/login-with-access-token-dialog/login-with-access-token-dialog.module.ts

@@ -7,6 +7,7 @@ import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
+import { IonIcon } from '@ionic/angular/standalone';
 
 import { GfDialogHeaderModule } from '../dialog-header/dialog-header.module';
 import { LoginWithAccessTokenDialog } from './login-with-access-token-dialog.component';
@@ -17,6 +18,7 @@ import { LoginWithAccessTokenDialog } from './login-with-access-token-dialog.com
     CommonModule,
     FormsModule,
     GfDialogHeaderModule,
+    IonIcon,
     MatButtonModule,
     MatCheckboxModule,
     MatDialogModule,

apps/client/src/app/components/portfolio-performance/portfolio-performance.component.ts

@@ -18,6 +18,8 @@ import {
   ViewChild
 } from '@angular/core';
 import { CountUp } from 'countup.js';
+import { addIcons } from 'ionicons';
+import { timeOutline } from 'ionicons/icons';
 import { isNumber } from 'lodash';
 
 @Component({
@@ -41,7 +43,9 @@ export class PortfolioPerformanceComponent implements OnChanges {
 
   @ViewChild('value') value: ElementRef;
 
-  public constructor(private notificationService: NotificationService) {}
+  public constructor(private notificationService: NotificationService) {
+    addIcons({ timeOutline });
+  }
 
   public ngOnChanges() {
     this.precision = this.precision >= 0 ? this.precision : 2;

apps/client/src/app/components/portfolio-performance/portfolio-performance.module.ts

@@ -2,6 +2,7 @@ import { GfValueComponent } from '@ghostfolio/ui/value';
 
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { IonIcon } from '@ionic/angular/standalone';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { PortfolioPerformanceComponent } from './portfolio-performance.component';
@@ -9,7 +10,7 @@ import { PortfolioPerformanceComponent } from './portfolio-performance.component
 @NgModule({
   declarations: [PortfolioPerformanceComponent],
   exports: [PortfolioPerformanceComponent],
-  imports: [CommonModule, GfValueComponent, NgxSkeletonLoaderModule],
+  imports: [CommonModule, GfValueComponent, IonIcon, NgxSkeletonLoaderModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class GfPortfolioPerformanceModule {}

apps/client/src/app/components/portfolio-summary/portfolio-summary.component.ts

@@ -12,6 +12,11 @@ import {
   Output
 } from '@angular/core';
 import { formatDistanceToNow } from 'date-fns';
+import { addIcons } from 'ionicons';
+import {
+  ellipsisHorizontalCircleOutline,
+  informationCircleOutline
+} from 'ionicons/icons';
 
 @Component({
   selector: 'gf-portfolio-summary',
@@ -36,7 +41,9 @@ export class PortfolioSummaryComponent implements OnChanges {
   );
   public timeInMarket: string;
 
-  public constructor(private notificationService: NotificationService) {}
+  public constructor(private notificationService: NotificationService) {
+    addIcons({ ellipsisHorizontalCircleOutline, informationCircleOutline });
+  }
 
   public ngOnChanges() {
     if (this.summary) {

apps/client/src/app/components/rule/rule.component.ts

@@ -14,6 +14,13 @@ import {
   Output
 } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
+import { addIcons } from 'ionicons';
+import {
+  checkmarkCircleOutline,
+  ellipsisHorizontal,
+  removeCircleOutline,
+  warningOutline
+} from 'ionicons/icons';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject, takeUntil } from 'rxjs';
 
@@ -41,7 +48,14 @@ export class RuleComponent implements OnInit {
   public constructor(
     private deviceService: DeviceDetectorService,
     private dialog: MatDialog
-  ) {}
+  ) {
+    addIcons({
+      checkmarkCircleOutline,
+      ellipsisHorizontal,
+      removeCircleOutline,
+      warningOutline
+    });
+  }
 
   public ngOnInit() {
     this.deviceType = this.deviceService.getDeviceInfo().deviceType;

apps/client/src/app/components/rule/rule.module.ts

@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatMenuModule } from '@angular/material/menu';
+import { IonIcon } from '@ionic/angular/standalone';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { RuleComponent } from './rule.component';
@@ -11,6 +12,7 @@ import { RuleComponent } from './rule.component';
   exports: [RuleComponent],
   imports: [
     CommonModule,
+    IonIcon,
     MatButtonModule,
     MatMenuModule,
     NgxSkeletonLoaderModule

apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.component.ts

@@ -8,6 +8,8 @@ import {
   OnInit
 } from '@angular/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { addIcons } from 'ionicons';
+import { arrowForwardOutline, checkmarkCircleOutline } from 'ionicons/icons';
 import ms from 'ms';
 import { interval, Subject } from 'rxjs';
 import { take, takeUntil, tap } from 'rxjs/operators';
@@ -41,6 +43,8 @@ export class SubscriptionInterstitialDialog implements OnInit {
     this.variantIndex = Math.floor(
       Math.random() * SubscriptionInterstitialDialog.VARIANTS_COUNT
     );
+
+    addIcons({ arrowForwardOutline, checkmarkCircleOutline });
   }
 
   public ngOnInit() {

apps/client/src/app/components/subscription-interstitial-dialog/subscription-interstitial-dialog.module.ts

@@ -6,6 +6,7 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule } from '@angular/material/dialog';
 import { RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
 
 import { SubscriptionInterstitialDialog } from './subscription-interstitial-dialog.component';
 
@@ -15,6 +16,7 @@ import { SubscriptionInterstitialDialog } from './subscription-interstitial-dial
     CommonModule,
     GfMembershipCardComponent,
     GfPremiumIndicatorComponent,
+    IonIcon,
     MatButtonModule,
     MatDialogModule,
     RouterModule

apps/client/src/app/components/user-account-access/user-account-access.component.ts

@@ -17,6 +17,8 @@ import {
 import { FormBuilder, Validators } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
+import { addIcons } from 'ionicons';
+import { addOutline, eyeOffOutline, eyeOutline } from 'ionicons/icons';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { EMPTY, Subject } from 'rxjs';
 import { catchError, takeUntil } from 'rxjs/operators';
@@ -97,6 +99,8 @@ export class UserAccountAccessComponent implements OnDestroy, OnInit {
           this.openCreateAccessDialog();
         }
       });
+
+    addIcons({ addOutline, eyeOffOutline, eyeOutline });
   }
 
   public ngOnInit() {

apps/client/src/app/components/user-account-access/user-account-access.module.ts

@@ -9,6 +9,7 @@ import { MatDialogModule } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
 
 import { GfCreateOrUpdateAccessDialogModule } from './create-or-update-access-dialog/create-or-update-access-dialog.module';
 import { UserAccountAccessComponent } from './user-account-access.component';
@@ -21,6 +22,7 @@ import { UserAccountAccessComponent } from './user-account-access.component';
     GfCreateOrUpdateAccessDialogModule,
     GfPortfolioAccessTableModule,
     GfPremiumIndicatorComponent,
+    IonIcon,
     MatButtonModule,
     MatDialogModule,
     MatFormFieldModule,

apps/client/src/app/components/user-account-settings/user-account-settings.component.ts

@@ -24,6 +24,8 @@ import { FormBuilder, Validators } from '@angular/forms';
 import { MatSlideToggleChange } from '@angular/material/slide-toggle';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { format, parseISO } from 'date-fns';
+import { addIcons } from 'ionicons';
+import { eyeOffOutline, eyeOutline } from 'ionicons/icons';
 import ms from 'ms';
 import { EMPTY, Subject, throwError } from 'rxjs';
 import { catchError, takeUntil } from 'rxjs/operators';
@@ -112,6 +114,8 @@ export class UserAccountSettingsComponent implements OnDestroy, OnInit {
           this.changeDetectorRef.markForCheck();
         }
       });
+
+    addIcons({ eyeOffOutline, eyeOutline });
   }
 
   public ngOnInit() {

apps/client/src/app/components/user-account-settings/user-account-settings.module.ts

@@ -10,6 +10,7 @@ import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
 
 import { UserAccountSettingsComponent } from './user-account-settings.component';
 
@@ -20,6 +21,7 @@ import { UserAccountSettingsComponent } from './user-account-settings.component'
     CommonModule,
     FormsModule,
     GfValueComponent,
+    IonIcon,
     MatButtonModule,
     MatCardModule,
     MatFormFieldModule,

apps/client/src/app/pages/about/about-page.component.ts

@@ -13,13 +13,23 @@ import {
 } from '@angular/core';
 import { MatTabsModule } from '@angular/material/tabs';
 import { RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import {
+  documentTextOutline,
+  happyOutline,
+  informationCircleOutline,
+  ribbonOutline,
+  shieldCheckmarkOutline,
+  sparklesOutline
+} from 'ionicons/icons';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
   host: { class: 'page has-tabs' },
-  imports: [MatTabsModule, RouterModule],
+  imports: [IonIcon, MatTabsModule, RouterModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-about-page',
   styleUrls: ['./about-page.scss'],
@@ -94,6 +104,15 @@ export class AboutPageComponent implements OnDestroy, OnInit {
           routerLink: publicRoutes.about.subRoutes.ossFriends.routerLink
         });
       });
+
+    addIcons({
+      documentTextOutline,
+      happyOutline,
+      informationCircleOutline,
+      ribbonOutline,
+      shieldCheckmarkOutline,
+      sparklesOutline
+    });
   }
 
   public ngOnInit() {

apps/client/src/app/pages/about/oss-friends/oss-friends-page.component.ts

@@ -1,12 +1,15 @@
 import { Component, OnDestroy } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
+import { IonIcon } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { arrowForwardOutline } from 'ionicons/icons';
 import { Subject } from 'rxjs';
 
 const ossFriends = require('../../../../assets/oss-friends.json');
 
 @Component({
-  imports: [MatButtonModule, MatCardModule],
+  imports: [IonIcon, MatButtonModule, MatCardModule],
   selector: 'gf-oss-friends-page',
   styleUrls: ['./oss-friends-page.scss'],
   templateUrl: './oss-friends-page.html'
@@ -16,6 +19,10 @@ export class OpenSourceSoftwareFriendsPageComponent implements OnDestroy {
 
   private unsubscribeSubject = new Subject<void>();
 
+  public constructor() {
+    addIcons({ arrowForwardOutline });
+  }
+
   public ngOnDestroy() {
     this.unsubscribeSubject.next();
     this.unsubscribeSubject.complete();

apps/client/src/app/pages/about/overview/about-overview-page.component.ts

@@ -14,11 +14,20 @@ import {
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import {
+  logoGithub,
+  logoLinkedin,
+  logoSlack,
+  logoX,
+  mail
+} from 'ionicons/icons';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
 @Component({
-  imports: [CommonModule, MatButtonModule, RouterModule],
+  imports: [CommonModule, IonIcon, MatButtonModule, RouterModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-about-overview-page',
   styleUrls: ['./about-overview-page.scss'],
@@ -52,6 +61,8 @@ export class AboutOverviewPageComponent implements OnDestroy, OnInit {
       globalPermissions,
       permissions.enableSubscription
     );
+
+    addIcons({ logoGithub, logoLinkedin, logoSlack, logoX, mail });
   }
 
   public ngOnInit() {

apps/client/src/app/pages/accounts/accounts-page.component.ts

@@ -14,6 +14,8 @@ import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Account as AccountModel } from '@prisma/client';
+import { addIcons } from 'ionicons';
+import { addOutline } from 'ionicons/icons';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { EMPTY, Subject, Subscription } from 'rxjs';
 import { catchError, takeUntil } from 'rxjs/operators';
@@ -77,6 +79,8 @@ export class AccountsPageComponent implements OnDestroy, OnInit {
           this.openTransferBalanceDialog();
         }
       });
+
+    addIcons({ addOutline });
   }
 
   public ngOnInit() {

apps/client/src/app/pages/accounts/accounts-page.module.ts

@@ -5,6 +5,7 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
 
 import { AccountsPageRoutingModule } from './accounts-page-routing.module';
 import { AccountsPageComponent } from './accounts-page.component';
@@ -20,6 +21,7 @@ import { GfTransferBalanceDialogModule } from './transfer-balance/transfer-balan
     GfAccountsTableModule,
     GfCreateOrUpdateAccountDialogModule,
     GfTransferBalanceDialogModule,
+    IonIcon,
     MatButtonModule,
     RouterModule
   ],

apps/client/src/app/pages/admin/admin-page.component.ts

@@ -2,6 +2,14 @@ import { TabConfiguration } from '@ghostfolio/common/interfaces';
 import { internalRoutes } from '@ghostfolio/common/routes/routes';
 
 import { Component, OnDestroy, OnInit } from '@angular/core';
+import { addIcons } from 'ionicons';
+import {
+  flashOutline,
+  peopleOutline,
+  readerOutline,
+  serverOutline,
+  settingsOutline
+} from 'ionicons/icons';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
 
@@ -18,7 +26,15 @@ export class AdminPageComponent implements OnDestroy, OnInit {
 
   private unsubscribeSubject = new Subject<void>();
 
-  public constructor(private deviceService: DeviceDetectorService) {}
+  public constructor(private deviceService: DeviceDetectorService) {
+    addIcons({
+      flashOutline,
+      peopleOutline,
+      readerOutline,
+      serverOutline,
+      settingsOutline
+    });
+  }
 
   public ngOnInit() {
     this.deviceType = this.deviceService.getDeviceInfo().deviceType;

apps/client/src/app/pages/admin/admin-page.module.ts

@@ -8,6 +8,7 @@ import { CacheService } from '@ghostfolio/client/services/cache.service';
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatTabsModule } from '@angular/material/tabs';
+import { IonIcon } from '@ionic/angular/standalone';
 
 import { AdminPageRoutingModule } from './admin-page-routing.module';
 import { AdminPageComponent } from './admin-page.component';
@@ -23,6 +24,7 @@ import { AdminPageComponent } from './admin-page.component';
     GfAdminOverviewModule,
     GfAdminSettingsModule,
     GfAdminUsersModule,
+    IonIcon,
     MatTabsModule
   ],
   providers: [CacheService],

apps/client/src/app/pages/blog/blog-page.component.ts

@@ -2,6 +2,8 @@ import { DataService } from '@ghostfolio/client/services/data.service';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 
 import { Component, OnDestroy } from '@angular/core';
+import { addIcons } from 'ionicons';
+import { chevronForwardOutline } from 'ionicons/icons';
 import { Subject } from 'rxjs';
 
 @Component({
@@ -23,6 +25,8 @@ export class BlogPageComponent implements OnDestroy {
       info?.globalPermissions,
       permissions.enableSubscription
     );
+
+    addIcons({ chevronForwardOutline });
   }
 
   public ngOnDestroy() {

apps/client/src/app/pages/blog/blog-page.module.ts

@@ -1,13 +1,14 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
+import { IonIcon } from '@ionic/angular/standalone';
 
 import { BlogPageRoutingModule } from './blog-page-routing.module';
 import { BlogPageComponent } from './blog-page.component';
 
 @NgModule({
   declarations: [BlogPageComponent],
-  imports: [BlogPageRoutingModule, CommonModule, MatCardModule],
+  imports: [BlogPageRoutingModule, CommonModule, IonIcon, MatCardModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class BlogPageModule {}

apps/client/src/app/pages/faq/faq-page.component.ts

@@ -4,6 +4,8 @@ import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 
 import { Component, OnDestroy, OnInit } from '@angular/core';
+import { addIcons } from 'ionicons';
+import { cloudyOutline, readerOutline, serverOutline } from 'ionicons/icons';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
 
@@ -50,6 +52,8 @@ export class FaqPageComponent implements OnDestroy, OnInit {
         routerLink: publicRoutes.faq.subRoutes.selfHosting.routerLink
       }
     ];
+
+    addIcons({ cloudyOutline, readerOutline, serverOutline });
   }
 
   public ngOnInit() {

apps/client/src/app/pages/faq/faq-page.module.ts

@@ -2,13 +2,20 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatTabsModule } from '@angular/material/tabs';
 import { RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
 
 import { FaqPageRoutingModule } from './faq-page-routing.module';
 import { FaqPageComponent } from './faq-page.component';
 
 @NgModule({
   declarations: [FaqPageComponent],
-  imports: [CommonModule, FaqPageRoutingModule, MatTabsModule, RouterModule],
+  imports: [
+    CommonModule,
+    FaqPageRoutingModule,
+    IonIcon,
+    MatTabsModule,
+    RouterModule
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class FaqPageModule {}

apps/client/src/app/pages/home/home-page.component.ts

@@ -5,6 +5,14 @@ import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 import { internalRoutes } from '@ghostfolio/common/routes/routes';
 
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { addIcons } from 'ionicons';
+import {
+  analyticsOutline,
+  bookmarkOutline,
+  newspaperOutline,
+  readerOutline,
+  walletOutline
+} from 'ionicons/icons';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -77,6 +85,14 @@ export class HomePageComponent implements OnDestroy, OnInit {
           this.changeDetectorRef.markForCheck();
         }
       });
+
+    addIcons({
+      analyticsOutline,
+      bookmarkOutline,
+      newspaperOutline,
+      readerOutline,
+      walletOutline
+    });
   }
 
   public ngOnInit() {

apps/client/src/app/pages/home/home-page.module.ts

@@ -8,6 +8,7 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatTabsModule } from '@angular/material/tabs';
 import { RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
 
 import { HomePageRoutingModule } from './home-page-routing.module';
 import { HomePageComponent } from './home-page.component';
@@ -20,6 +21,7 @@ import { HomePageComponent } from './home-page.component';
     GfHomeMarketModule,
     GfHomeOverviewModule,
     GfHomeSummaryModule,
+    IonIcon,
     HomePageRoutingModule,
     HomeWatchlistComponent,
     MatTabsModule,

apps/client/src/app/pages/portfolio/activities/activities-page.component.ts

@@ -17,6 +17,8 @@ import { Sort, SortDirection } from '@angular/material/sort';
 import { MatTableDataSource } from '@angular/material/table';
 import { ActivatedRoute, Router } from '@angular/router';
 import { format, parseISO } from 'date-fns';
+import { addIcons } from 'ionicons';
+import { addOutline } from 'ionicons/icons';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject, Subscription } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -86,6 +88,8 @@ export class ActivitiesPageComponent implements OnDestroy, OnInit {
           }
         }
       });
+
+    addIcons({ addOutline });
   }
 
   public ngOnInit() {

apps/client/src/app/pages/portfolio/activities/activities-page.module.ts

@@ -6,6 +6,7 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
 
 import { ActivitiesPageRoutingModule } from './activities-page-routing.module';
 import { ActivitiesPageComponent } from './activities-page.component';
@@ -20,6 +21,7 @@ import { GfImportActivitiesDialogModule } from './import-activities-dialog/impor
     GfActivitiesTableComponent,
     GfCreateOrUpdateActivityDialogModule,
     GfImportActivitiesDialogModule,
+    IonIcon,
     MatButtonModule,
     MatSnackBarModule,
     RouterModule

apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.component.ts

@@ -18,6 +18,8 @@ import { DateAdapter, MAT_DATE_LOCALE } from '@angular/material/core';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
 import { AssetClass, AssetSubClass, Tag, Type } from '@prisma/client';
 import { isAfter, isToday } from 'date-fns';
+import { addIcons } from 'ionicons';
+import { calendarClearOutline, refreshOutline } from 'ionicons/icons';
 import { EMPTY, Subject } from 'rxjs';
 import { catchError, delay, takeUntil } from 'rxjs/operators';
 
@@ -67,7 +69,9 @@ export class CreateOrUpdateActivityDialog implements OnDestroy {
     private formBuilder: FormBuilder,
     @Inject(MAT_DATE_LOCALE) private locale: string,
     private userService: UserService
-  ) {}
+  ) {
+    addIcons({ calendarClearOutline, refreshOutline });
+  }
 
   public ngOnInit() {
     this.currencyOfAssetProfile = this.data.activity?.SymbolProfile?.currency;

apps/client/src/app/pages/portfolio/activities/create-or-update-activity-dialog/create-or-update-activity-dialog.module.ts

@@ -13,6 +13,7 @@ import { MatDialogModule } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
+import { IonIcon } from '@ionic/angular/standalone';
 
 import { CreateOrUpdateActivityDialog } from './create-or-update-activity-dialog.component';
 
@@ -25,6 +26,7 @@ import { CreateOrUpdateActivityDialog } from './create-or-update-activity-dialog
     GfSymbolAutocompleteComponent,
     GfTagsSelectorComponent,
     GfValueComponent,
+    IonIcon,
     MatButtonModule,
     MatCheckboxModule,
     MatDatepickerModule,

apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.component.ts

@@ -22,6 +22,8 @@ import { SortDirection } from '@angular/material/sort';
 import { MatStepper } from '@angular/material/stepper';
 import { MatTableDataSource } from '@angular/material/table';
 import { AssetClass } from '@prisma/client';
+import { addIcons } from 'ionicons';
+import { cloudUploadOutline, warningOutline } from 'ionicons/icons';
 import { isArray, sortBy } from 'lodash';
 import ms from 'ms';
 import { DeviceDetectorService } from 'ngx-device-detector';
@@ -68,7 +70,9 @@ export class ImportActivitiesDialog implements OnDestroy {
     public dialogRef: MatDialogRef<ImportActivitiesDialog>,
     private importActivitiesService: ImportActivitiesService,
     private snackBar: MatSnackBar
-  ) {}
+  ) {
+    addIcons({ cloudUploadOutline, warningOutline });
+  }
 
   public ngOnInit() {
     this.deviceType = this.deviceService.getDeviceInfo().deviceType;

apps/client/src/app/pages/portfolio/activities/import-activities-dialog/import-activities-dialog.module.ts

@@ -14,6 +14,7 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { MatSelectModule } from '@angular/material/select';
 import { MatStepperModule } from '@angular/material/stepper';
+import { IonIcon } from '@ionic/angular/standalone';
 
 import { ImportActivitiesDialog } from './import-activities-dialog.component';
 
@@ -27,6 +28,7 @@ import { ImportActivitiesDialog } from './import-activities-dialog.component';
     GfDialogHeaderModule,
     GfFileDropModule,
     GfSymbolModule,
+    IonIcon,
     MatButtonModule,
     MatDialogModule,
     MatExpansionModule,

apps/client/src/app/pages/portfolio/analysis/analysis-page.component.ts

@@ -26,6 +26,8 @@ import {
 import { MatMenuTrigger } from '@angular/material/menu';
 import { MatSnackBar } from '@angular/material/snack-bar';
 import { SymbolProfile } from '@prisma/client';
+import { addIcons } from 'ionicons';
+import { copyOutline, ellipsisVertical } from 'ionicons/icons';
 import { isNumber, sortBy } from 'lodash';
 import ms from 'ms';
 import { DeviceDetectorService } from 'ngx-device-detector';
@@ -89,6 +91,8 @@ export class AnalysisPageComponent implements OnDestroy, OnInit {
   ) {
     const { benchmarks } = this.dataService.fetchInfo();
     this.benchmarks = benchmarks;
+
+    addIcons({ copyOutline, ellipsisVertical });
   }
 
   get savingsRate() {

apps/client/src/app/pages/portfolio/analysis/analysis-page.module.ts

@@ -11,6 +11,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { IonIcon } from '@ionic/angular/standalone';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { AnalysisPageRoutingModule } from './analysis-page-routing.module';
@@ -27,6 +28,7 @@ import { AnalysisPageComponent } from './analysis-page.component';
     GfPremiumIndicatorComponent,
     GfToggleModule,
     GfValueComponent,
+    IonIcon,
     MatButtonModule,
     MatCardModule,
     MatMenuModule,

apps/client/src/app/pages/portfolio/portfolio-page.component.ts

@@ -3,6 +3,14 @@ import { TabConfiguration, User } from '@ghostfolio/common/interfaces';
 import { internalRoutes } from '@ghostfolio/common/routes/routes';
 
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { addIcons } from 'ionicons';
+import {
+  analyticsOutline,
+  calculatorOutline,
+  pieChartOutline,
+  scanOutline,
+  swapVerticalOutline
+} from 'ionicons/icons';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -64,6 +72,14 @@ export class PortfolioPageComponent implements OnDestroy, OnInit {
           this.changeDetectorRef.markForCheck();
         }
       });
+
+    addIcons({
+      analyticsOutline,
+      calculatorOutline,
+      pieChartOutline,
+      scanOutline,
+      swapVerticalOutline
+    });
   }
 
   public ngOnInit() {

apps/client/src/app/pages/portfolio/portfolio-page.module.ts

@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatTabsModule } from '@angular/material/tabs';
 import { RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
 
 import { PortfolioPageRoutingModule } from './portfolio-page-routing.module';
 import { PortfolioPageComponent } from './portfolio-page.component';
@@ -10,6 +11,7 @@ import { PortfolioPageComponent } from './portfolio-page.component';
   declarations: [PortfolioPageComponent],
   imports: [
     CommonModule,
+    IonIcon,
     MatTabsModule,
     PortfolioPageRoutingModule,
     RouterModule

apps/client/src/app/pages/portfolio/x-ray/x-ray-page.component.ts

@@ -10,6 +10,12 @@ import { User } from '@ghostfolio/common/interfaces/user.interface';
 import { hasPermission, permissions } from '@ghostfolio/common/permissions';
 
 import { ChangeDetectorRef, Component } from '@angular/core';
+import { addIcons } from 'ionicons';
+import {
+  checkmarkCircleOutline,
+  removeCircleOutline,
+  warningOutline
+} from 'ionicons/icons';
 import { Subject, takeUntil } from 'rxjs';
 
 @Component({
@@ -40,7 +46,9 @@ export class XRayPageComponent {
     private dataService: DataService,
     private impersonationStorageService: ImpersonationStorageService,
     private userService: UserService
-  ) {}
+  ) {
+    addIcons({ checkmarkCircleOutline, removeCircleOutline, warningOutline });
+  }
 
   public ngOnInit() {
     this.impersonationStorageService

apps/client/src/app/pages/portfolio/x-ray/x-ray-page.module.ts

@@ -3,6 +3,7 @@ import { GfPremiumIndicatorComponent } from '@ghostfolio/ui/premium-indicator';
 
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { IonIcon } from '@ionic/angular/standalone';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 
 import { XRayPageRoutingModule } from './x-ray-page-routing.module';
@@ -14,6 +15,7 @@ import { XRayPageComponent } from './x-ray-page.component';
     CommonModule,
     GfPremiumIndicatorComponent,
     GfRulesModule,
+    IonIcon,
     NgxSkeletonLoaderModule,
     XRayPageRoutingModule
   ],

apps/client/src/app/pages/pricing/pricing-page.component.ts

@@ -7,6 +7,8 @@ import { publicRoutes } from '@ghostfolio/common/routes/routes';
 import { translate } from '@ghostfolio/ui/i18n';
 
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { addIcons } from 'ionicons';
+import { checkmarkCircleOutline, checkmarkOutline } from 'ionicons/icons';
 import { StringValue } from 'ms';
 import { StripeService } from 'ngx-stripe';
 import { Subject } from 'rxjs';
@@ -53,7 +55,9 @@ export class PricingPageComponent implements OnDestroy, OnInit {
     private notificationService: NotificationService,
     private stripeService: StripeService,
     private userService: UserService
-  ) {}
+  ) {
+    addIcons({ checkmarkCircleOutline, checkmarkOutline });
+  }
 
   public ngOnInit() {
     const { baseCurrency, subscriptionOffer } = this.dataService.fetchInfo();

apps/client/src/app/pages/pricing/pricing-page.module.ts

@@ -6,6 +6,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
 
 import { PricingPageRoutingModule } from './pricing-page-routing.module';
 import { PricingPageComponent } from './pricing-page.component';
@@ -15,6 +16,7 @@ import { PricingPageComponent } from './pricing-page.component';
   imports: [
     CommonModule,
     GfPremiumIndicatorComponent,
+    IonIcon,
     MatButtonModule,
     MatCardModule,
     MatTooltipModule,

apps/client/src/app/pages/register/register-page.module.ts

@@ -4,6 +4,7 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
 
 import { RegisterPageRoutingModule } from './register-page-routing.module';
 import { RegisterPageComponent } from './register-page.component';
@@ -14,6 +15,7 @@ import { ShowAccessTokenDialogModule } from './show-access-token-dialog/show-acc
   imports: [
     CommonModule,
     GfLogoComponent,
+    IonIcon,
     MatButtonModule,
     RegisterPageRoutingModule,
     RouterModule,

apps/client/src/app/pages/register/show-access-token-dialog/show-access-token-dialog.component.ts

@@ -10,6 +10,12 @@ import {
 } from '@angular/core';
 import { MAT_DIALOG_DATA } from '@angular/material/dialog';
 import { MatStepper } from '@angular/material/stepper';
+import { addIcons } from 'ionicons';
+import {
+  arrowForwardOutline,
+  checkmarkOutline,
+  copyOutline
+} from 'ionicons/icons';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 
@@ -39,7 +45,9 @@ export class ShowAccessTokenDialog {
     private changeDetectorRef: ChangeDetectorRef,
     @Inject(MAT_DIALOG_DATA) public data: ShowAccessTokenDialogParams,
     private dataService: DataService
-  ) {}
+  ) {
+    addIcons({ arrowForwardOutline, checkmarkOutline, copyOutline });
+  }
 
   public createAccount() {
     this.dataService

apps/client/src/app/pages/resources/personal-finance-tools/personal-finance-tools-page.component.ts

@@ -2,6 +2,8 @@ import { personalFinanceTools } from '@ghostfolio/common/personal-finance-tools'
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 
 import { Component, OnDestroy } from '@angular/core';
+import { addIcons } from 'ionicons';
+import { chevronForwardOutline } from 'ionicons/icons';
 import { Subject } from 'rxjs';
 
 @Component({
@@ -25,6 +27,10 @@ export class PersonalFinanceToolsPageComponent implements OnDestroy {
 
   private unsubscribeSubject = new Subject<void>();
 
+  public constructor() {
+    addIcons({ chevronForwardOutline });
+  }
+
   public ngOnDestroy() {
     this.unsubscribeSubject.next();
     this.unsubscribeSubject.complete();

apps/client/src/app/pages/resources/personal-finance-tools/personal-finance-tools-page.module.ts

@@ -1,13 +1,19 @@
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
+import { IonIcon } from '@ionic/angular/standalone';
 
 import { PersonalFinanceToolsPageRoutingModule } from './personal-finance-tools-page-routing.module';
 import { PersonalFinanceToolsPageComponent } from './personal-finance-tools-page.component';
 
 @NgModule({
   declarations: [PersonalFinanceToolsPageComponent],
-  imports: [CommonModule, MatCardModule, PersonalFinanceToolsPageRoutingModule],
+  imports: [
+    CommonModule,
+    IonIcon,
+    MatCardModule,
+    PersonalFinanceToolsPageRoutingModule
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class PersonalFinanceToolsPageModule {}

apps/client/src/app/pages/resources/resources-page.component.ts

@@ -2,6 +2,13 @@ import { TabConfiguration } from '@ghostfolio/common/interfaces';
 import { publicRoutes } from '@ghostfolio/common/routes/routes';
 
 import { Component, OnInit } from '@angular/core';
+import { addIcons } from 'ionicons';
+import {
+  bookOutline,
+  libraryOutline,
+  newspaperOutline,
+  readerOutline
+} from 'ionicons/icons';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
 
@@ -39,7 +46,9 @@ export class ResourcesPageComponent implements OnInit {
 
   private unsubscribeSubject = new Subject<void>();
 
-  public constructor(private deviceService: DeviceDetectorService) {}
+  public constructor(private deviceService: DeviceDetectorService) {
+    addIcons({ bookOutline, libraryOutline, newspaperOutline, readerOutline });
+  }
 
   public ngOnInit() {
     this.deviceType = this.deviceService.getDeviceInfo().deviceType;

apps/client/src/app/pages/resources/resources-page.module.ts

@@ -2,6 +2,7 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatTabsModule } from '@angular/material/tabs';
 import { RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
 
 import { ResourcesPageRoutingModule } from './resources-page-routing.module';
 import { ResourcesPageComponent } from './resources-page.component';
@@ -10,6 +11,7 @@ import { ResourcesPageComponent } from './resources-page.component';
   declarations: [ResourcesPageComponent],
   imports: [
     CommonModule,
+    IonIcon,
     MatTabsModule,
     ResourcesPageRoutingModule,
     RouterModule

apps/client/src/app/pages/user-account/user-account-page.component.ts

@@ -3,6 +3,8 @@ import { TabConfiguration, User } from '@ghostfolio/common/interfaces';
 import { internalRoutes } from '@ghostfolio/common/routes/routes';
 
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { addIcons } from 'ionicons';
+import { diamondOutline, keyOutline, settingsOutline } from 'ionicons/icons';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject, takeUntil } from 'rxjs';
 
@@ -54,6 +56,8 @@ export class UserAccountPageComponent implements OnDestroy, OnInit {
           this.changeDetectorRef.markForCheck();
         }
       });
+
+    addIcons({ diamondOutline, keyOutline, settingsOutline });
   }
 
   public ngOnInit() {

apps/client/src/app/pages/user-account/user-account-page.module.ts

@@ -5,6 +5,7 @@ import { GfUserAccountSettingsModule } from '@ghostfolio/client/components/user-
 import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatTabsModule } from '@angular/material/tabs';
+import { IonIcon } from '@ionic/angular/standalone';
 
 import { UserAccountPageRoutingModule } from './user-account-page-routing.module';
 import { UserAccountPageComponent } from './user-account-page.component';
@@ -16,6 +17,7 @@ import { UserAccountPageComponent } from './user-account-page.component';
     GfUserAccountAccessModule,
     GfUserAccountMembershipModule,
     GfUserAccountSettingsModule,
+    IonIcon,
     MatTabsModule,
     UserAccountPageRoutingModule
   ],

apps/client/src/app/pages/zen/zen-page.component.ts

@@ -3,6 +3,8 @@ import { TabConfiguration, User } from '@ghostfolio/common/interfaces';
 import { internalRoutes } from '@ghostfolio/common/routes/routes';
 
 import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { addIcons } from 'ionicons';
+import { analyticsOutline, walletOutline } from 'ionicons/icons';
 import { DeviceDetectorService } from 'ngx-device-detector';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -47,6 +49,8 @@ export class ZenPageComponent implements OnDestroy, OnInit {
           this.changeDetectorRef.markForCheck();
         }
       });
+
+    addIcons({ analyticsOutline, walletOutline });
   }
 
   public ngOnInit() {

apps/client/src/app/pages/zen/zen-page.module.ts

@@ -5,6 +5,7 @@ import { CommonModule } from '@angular/common';
 import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { MatTabsModule } from '@angular/material/tabs';
 import { RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
 
 import { ZenPageRoutingModule } from './zen-page-routing.module';
 import { ZenPageComponent } from './zen-page.component';
@@ -15,6 +16,7 @@ import { ZenPageComponent } from './zen-page.component';
     CommonModule,
     GfHomeHoldingsModule,
     GfHomeOverviewModule,
+    IonIcon,
     MatTabsModule,
     RouterModule,
     ZenPageRoutingModule

apps/client/src/index.html

@@ -53,9 +53,6 @@
   <body>
     <gf-root></gf-root>
 
-    <script src="../ionicons/ionicons.esm.js" type="module"></script>
-    <script nomodule="" src="ionicons.js"></script>
-
     <noscript
       >Please enable JavaScript to continue using this application.</noscript
     >

libs/ui/src/lib/account-balances/account-balances.component.ts

@@ -31,7 +31,14 @@ import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { IonIcon } from '@ionic/angular/standalone';
 import { format } from 'date-fns';
+import { addIcons } from 'ionicons';
+import {
+  calendarClearOutline,
+  ellipsisHorizontal,
+  trashOutline
+} from 'ionicons/icons';
 import { get } from 'lodash';
 import { Subject } from 'rxjs';
 
@@ -41,6 +48,7 @@ import { GfValueComponent } from '../value';
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     GfValueComponent,
+    IonIcon,
     MatButtonModule,
     MatDatepickerModule,
     MatFormFieldModule,
@@ -86,7 +94,9 @@ export class GfAccountBalancesComponent
   public constructor(
     private dateAdapter: DateAdapter<any>,
     private notificationService: NotificationService
-  ) {}
+  ) {
+    addIcons({ calendarClearOutline, ellipsisHorizontal, trashOutline });
+  }
 
   public ngOnInit() {
     this.dateAdapter.setLocale(this.locale);

libs/ui/src/lib/activities-filter/activities-filter.component.ts

@@ -27,6 +27,9 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatChipInputEvent, MatChipsModule } from '@angular/material/chips';
 import { MatInputModule } from '@angular/material/input';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { IonIcon } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { closeOutline, searchOutline } from 'ionicons/icons';
 import { groupBy } from 'lodash';
 import { BehaviorSubject, Observable, Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
@@ -36,6 +39,7 @@ import { takeUntil } from 'rxjs/operators';
   imports: [
     CommonModule,
     GfSymbolModule,
+    IonIcon,
     MatAutocompleteModule,
     MatButtonModule,
     MatChipsModule,
@@ -82,6 +86,8 @@ export class GfActivitiesFilterComponent implements OnChanges, OnDestroy {
           this.filterGroups$.next(this.getGroupedFilters());
         }
       });
+
+    addIcons({ closeOutline, searchOutline });
   }
 
   public ngOnChanges(changes: SimpleChanges) {

libs/ui/src/lib/activities-table/activities-table.component.ts

@@ -42,8 +42,23 @@ import {
 } from '@angular/material/sort';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { IonIcon } from '@ionic/angular/standalone';
 import { isUUID } from 'class-validator';
 import { endOfToday, isAfter } from 'date-fns';
+import { addIcons } from 'ionicons';
+import {
+  alertCircleOutline,
+  calendarClearOutline,
+  cloudDownloadOutline,
+  cloudUploadOutline,
+  colorWandOutline,
+  copyOutline,
+  createOutline,
+  documentTextOutline,
+  ellipsisHorizontal,
+  ellipsisVertical,
+  trashOutline
+} from 'ionicons/icons';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { Subject, Subscription, takeUntil } from 'rxjs';
 
@@ -56,6 +71,7 @@ import { Subject, Subscription, takeUntil } from 'rxjs';
     GfNoTransactionsInfoComponent,
     GfSymbolModule,
     GfValueComponent,
+    IonIcon,
     MatButtonModule,
     MatCheckboxModule,
     MatMenuModule,
@@ -121,7 +137,21 @@ export class GfActivitiesTableComponent
 
   private unsubscribeSubject = new Subject<void>();
 
-  public constructor(private notificationService: NotificationService) {}
+  public constructor(private notificationService: NotificationService) {
+    addIcons({
+      alertCircleOutline,
+      calendarClearOutline,
+      cloudDownloadOutline,
+      cloudUploadOutline,
+      colorWandOutline,
+      copyOutline,
+      createOutline,
+      documentTextOutline,
+      ellipsisHorizontal,
+      ellipsisVertical,
+      trashOutline
+    });
+  }
 
   public ngOnInit() {
     if (this.showCheckbox) {

libs/ui/src/lib/activity-type/activity-type.component.ts

@@ -8,11 +8,21 @@ import {
   Input,
   OnChanges
 } from '@angular/core';
+import { IonIcon } from '@ionic/angular/standalone';
 import { Type as ActivityType } from '@prisma/client';
+import { addIcons } from 'ionicons';
+import {
+  addCircleOutline,
+  arrowDownCircleOutline,
+  arrowUpCircleOutline,
+  cubeOutline,
+  flameOutline,
+  hammerOutline
+} from 'ionicons/icons';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule],
+  imports: [CommonModule, IonIcon],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-activity-type',
   styleUrls: ['./activity-type.component.scss'],
@@ -23,6 +33,17 @@ export class GfActivityTypeComponent implements OnChanges {
 
   public activityTypeLabel: string;
 
+  public constructor() {
+    addIcons({
+      addCircleOutline,
+      arrowDownCircleOutline,
+      arrowUpCircleOutline,
+      cubeOutline,
+      flameOutline,
+      hammerOutline
+    });
+  }
+
   public ngOnChanges() {
     this.activityTypeLabel = translate(this.activityType);
   }

libs/ui/src/lib/assistant/assistant.component.ts

@@ -39,9 +39,16 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatMenuTrigger } from '@angular/material/menu';
 import { MatSelectModule } from '@angular/material/select';
 import { RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
 import { Account, AssetClass, DataSource } from '@prisma/client';
 import { differenceInYears } from 'date-fns';
 import Fuse from 'fuse.js';
+import { addIcons } from 'ionicons';
+import {
+  closeCircleOutline,
+  closeOutline,
+  searchOutline
+} from 'ionicons/icons';
 import { isFunction } from 'lodash';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { EMPTY, Observable, Subject, merge, of } from 'rxjs';
@@ -72,6 +79,7 @@ import {
     GfAssistantListItemComponent,
     GfEntityLogoComponent,
     GfSymbolModule,
+    IonIcon,
     MatButtonModule,
     MatFormFieldModule,
     MatSelectModule,
@@ -176,7 +184,9 @@ export class GfAssistantComponent implements OnChanges, OnDestroy, OnInit {
     private changeDetectorRef: ChangeDetectorRef,
     private dataService: DataService,
     private formBuilder: FormBuilder
-  ) {}
+  ) {
+    addIcons({ closeCircleOutline, closeOutline, searchOutline });
+  }
 
   public ngOnInit() {
     this.assetClasses = Object.keys(AssetClass).map((assetClass) => {

libs/ui/src/lib/benchmark/benchmark.component.ts

@@ -28,6 +28,9 @@ import { MatMenuModule } from '@angular/material/menu';
 import { MatSort, MatSortModule } from '@angular/material/sort';
 import { MatTableDataSource, MatTableModule } from '@angular/material/table';
 import { ActivatedRoute, Router, RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { ellipsisHorizontal, trashOutline } from 'ionicons/icons';
 import { get, isNumber } from 'lodash';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
 import { Subject, takeUntil } from 'rxjs';
@@ -41,6 +44,7 @@ import { BenchmarkDetailDialogParams } from './benchmark-detail-dialog/interface
     CommonModule,
     GfTrendIndicatorComponent,
     GfValueComponent,
+    IonIcon,
     MatButtonModule,
     MatMenuModule,
     MatSortModule,
@@ -99,6 +103,8 @@ export class GfBenchmarkComponent implements OnChanges, OnDestroy {
           });
         }
       });
+
+    addIcons({ ellipsisHorizontal, trashOutline });
   }
 
   public ngOnChanges() {

libs/ui/src/lib/carousel/carousel.component.ts

@@ -12,10 +12,13 @@ import {
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { ANIMATION_MODULE_TYPE } from '@angular/platform-browser/animations';
+import { IonIcon } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { chevronBackOutline, chevronForwardOutline } from 'ionicons/icons';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [MatButtonModule],
+  imports: [IonIcon, MatButtonModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-carousel',
   styleUrls: ['./carousel.component.scss'],
@@ -40,6 +43,8 @@ export class GfCarouselComponent {
     @Optional() @Inject(ANIMATION_MODULE_TYPE) animationsModule?: string
   ) {
     this.animationsDisabled = animationsModule === 'NoopAnimations';
+
+    addIcons({ chevronBackOutline, chevronForwardOutline });
   }
 
   public next() {

libs/ui/src/lib/historical-market-data-editor/historical-market-data-editor-dialog/historical-market-data-editor-dialog.component.ts

@@ -21,6 +21,9 @@ import {
 } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
+import { IonIcon } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { calendarClearOutline, refreshOutline } from 'ionicons/icons';
 import { Subject, takeUntil } from 'rxjs';
 
 import { HistoricalMarketDataEditorDialogParams } from './interfaces/interfaces';
@@ -30,6 +33,7 @@ import { HistoricalMarketDataEditorDialogParams } from './interfaces/interfaces'
   host: { class: 'h-100' },
   imports: [
     FormsModule,
+    IonIcon,
     MatButtonModule,
     MatDatepickerModule,
     MatDialogModule,
@@ -56,7 +60,9 @@ export class GfHistoricalMarketDataEditorDialogComponent
     private dateAdapter: DateAdapter<any>,
     public dialogRef: MatDialogRef<GfHistoricalMarketDataEditorDialogComponent>,
     @Inject(MAT_DATE_LOCALE) private locale: string
-  ) {}
+  ) {
+    addIcons({ calendarClearOutline, refreshOutline });
+  }
 
   public ngOnInit() {
     this.locale = this.data.user?.settings?.locale;

libs/ui/src/lib/membership-card/membership-card.component.ts

@@ -11,12 +11,21 @@ import {
 } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { refreshOutline } from 'ionicons/icons';
 
 import { GfLogoComponent } from '../logo';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule, GfLogoComponent, MatButtonModule, RouterModule],
+  imports: [
+    CommonModule,
+    GfLogoComponent,
+    IonIcon,
+    MatButtonModule,
+    RouterModule
+  ],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-membership-card',
   styleUrls: ['./membership-card.component.scss'],
@@ -31,6 +40,10 @@ export class GfMembershipCardComponent {
 
   public routerLinkPricing = publicRoutes.pricing.routerLink;
 
+  public constructor() {
+    addIcons({ refreshOutline });
+  }
+
   public onGenerateApiKey(event: MouseEvent) {
     event.preventDefault();
     event.stopPropagation();

libs/ui/src/lib/premium-indicator/premium-indicator.component.ts

@@ -8,10 +8,13 @@ import {
   Input
 } from '@angular/core';
 import { RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
+import { addIcons } from 'ionicons';
+import { diamondOutline } from 'ionicons/icons';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule, RouterModule],
+  imports: [CommonModule, IonIcon, RouterModule],
   schemas: [CUSTOM_ELEMENTS_SCHEMA],
   selector: 'gf-premium-indicator',
   styleUrls: ['./premium-indicator.component.scss'],
@@ -21,4 +24,8 @@ export class GfPremiumIndicatorComponent {
   @Input() enableLink = true;
 
   public routerLinkPricing = publicRoutes.pricing.routerLink;
+
+  public constructor() {
+    addIcons({ diamondOutline });
+  }
 }