Можно ли создать повторно используемый компонент значка, который не создает дубликатов TemplateRefs

Я попытался создать IconComponent который показывает другой значок SVG в зависимости от переданной строки.

Пример:

<app-icon icon="tick"></app-icon>

Показывал бы SVG галочки.

Небольшой пример StackBlitz

Однако я считаю, что этот подход создает новую и уникальную TemplateRef для каждого экземпляра IconComponent, что создает бесполезные дубликаты данных в памяти.

Эта проблема меня беспокоит, когда на странице могут быть тысячи значков, например, в таблице / сетке.

Есть ли лучший подход?

import {
  ChangeDetectorRef,
  Component,
  Input,
  OnChanges,
  SimpleChanges,
  TemplateRef,
  ViewChild
} from "@angular/core";

@Component({
  selector: "app-icon",
  templateUrl: "./icon.component.html",
  styleUrls: ["./icon.component.css"]
})
export class IconComponent implements OnChanges {
  @Input("icon")
  public icon?: string;

  @ViewChild("chevronTemplate", { static: true })
  public chevronTemplate?: TemplateRef<undefined>;

  @ViewChild("tickTemplate", { static: true })
  public tickTemplate?: TemplateRef<undefined>;

  public iconTemplate?: TemplateRef<undefined>;

  public constructor(private readonly changeDetectorRef: ChangeDetectorRef) {}

  public ngOnChanges(changes: SimpleChanges): void {
    let hasChanges = false;

    if (changes.icon !== undefined) {
      this.iconTemplate = this.getIconTemplate();

      hasChanges = true;
    }

    if (hasChanges) {
      this.changeDetectorRef.detectChanges();
    }
  }

  private getIconTemplate(): TemplateRef<undefined> {
    switch (this.icon) {
      case "chevron":
        return this.chevronTemplate;

      case "tick":
        return this.tickTemplate;

      default:
        throw new Error(`Unknown Icon Type '${this.icon}'.`);
    }
  }
}