Add icon in Storybook

libs/ui/src/lib/entity-logo/entity-logo.component.html

@@ -1,4 +1,6 @@
-@if (src) {
+@if (useLogo) {
+  <gf-logo [showLabel]="true" [size]="size || 'medium'"></gf-logo>
+} @else if (src) {
   <img
     onerror="this.style.display='none'"
     [ngClass]="{ large: size === 'large' }"

libs/ui/src/lib/entity-logo/entity-logo.component.stories.ts

@@ -0,0 +1,59 @@
+import { CommonModule } from '@angular/common';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { importProvidersFrom } from '@angular/core';
+import { DataSource } from '@prisma/client';
+import { applicationConfig, Meta, StoryObj } from '@storybook/angular';
+
+import { HttpClientMock } from '../mocks/httpClient.mock';
+import { GfEntityLogoComponent } from './entity-logo.component';
+
+export default {
+  title: 'Entity Logo',
+  component: GfEntityLogoComponent,
+  decorators: [
+    applicationConfig({
+      providers: [
+        importProvidersFrom(CommonModule, HttpClientModule),
+        {
+          provide: HttpClient,
+          useValue: new HttpClientMock(
+            new Map([
+              [
+                '../api/v1/logo/MANUAL/GHOST',
+                {
+                  logoUrl: '/assets/ghost.svg'
+                }
+              ],
+              [
+                '../api/v1/logo?url=https://ghostfol.io',
+                {
+                  logoUrl: '/assets/ghost.svg'
+                }
+              ]
+            ])
+          )
+        }
+      ]
+    })
+  ]
+} as Meta<GfEntityLogoComponent>;
+
+type Story = StoryObj<GfEntityLogoComponent>;
+
+export const Default: Story = {
+  args: {
+    dataSource: DataSource.MANUAL,
+    symbol: 'GHOST',
+    useLogo: true,
+    size: 'large'
+  }
+};
+
+export const WithUrl: Story = {
+  args: {
+    size: 'large',
+    tooltip: 'Ghostfolio',
+    url: 'https://ghostfol.io',
+    useLogo: true
+  }
+};

libs/ui/src/lib/entity-logo/entity-logo.component.ts

@@ -1,17 +1,21 @@
 import { CommonModule } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
 import {
-  CUSTOM_ELEMENTS_SCHEMA,
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   Input,
   OnChanges
 } from '@angular/core';
 import { DataSource } from '@prisma/client';
+import { of } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+
+import { GfLogoComponent } from '../logo/logo.component';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [CommonModule],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  imports: [CommonModule, GfLogoComponent],
   selector: 'gf-entity-logo',
   styleUrls: ['./entity-logo.component.scss'],
   templateUrl: './entity-logo.component.html'
@@ -22,14 +26,34 @@ export class GfEntityLogoComponent implements OnChanges {
   @Input() symbol: string;
   @Input() tooltip: string;
   @Input() url: string;
+  @Input() useLogo = false;
 
   public src: string;
 
+  public constructor(
+    private readonly changeDetectorRef: ChangeDetectorRef,
+    private readonly http: HttpClient
+  ) {}
+
   public ngOnChanges() {
+    if (this.useLogo) {
+      return;
+    }
+
     if (this.dataSource && this.symbol) {
       this.src = `../api/v1/logo/${this.dataSource}/${this.symbol}`;
     } else if (this.url) {
-      this.src = `../api/v1/logo?url=${this.url}`;
+      this.http
+        .get<{ logoUrl: string }>(`../api/v1/logo?url=${this.url}`)
+        .pipe(
+          catchError(() => {
+            return of({ logoUrl: '' });
+          })
+        )
+        .subscribe(({ logoUrl }) => {
+          this.src = logoUrl;
+          this.changeDetectorRef.markForCheck();
+        });
     }
   }
 }