[EC-512] Tree shakeable icons (#3427)

* [EC-512] feat: create new icon class

* [EC-512] feat: implement protected svgIcon function

* [EC-512] feat: use new icon class in component

* [EC-512] feat: integrate new icons in application

* [EC-512] fix: linting

* [EC-512] chore: move report icons to where they are used

* [EC-512] chore: add export type explanation

libs/components/src/icon/icon.components.spec.ts

@@ -0,0 +1,39 @@
+import { ComponentFixture, TestBed } from "@angular/core/testing";
+
+import { Icon, svgIcon } from "./icon";
+import { BitIconComponent } from "./icon.component";
+
+describe("IconComponent", () => {
+  let component: BitIconComponent;
+  let fixture: ComponentFixture<BitIconComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [BitIconComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(BitIconComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it("should have empty innerHtml when input is not an Icon", () => {
+    const fakeIcon = { svg: "harmful user input" } as Icon;
+
+    component.icon = fakeIcon;
+    fixture.detectChanges();
+
+    const el = fixture.nativeElement as HTMLElement;
+    expect(el.innerHTML).toBe("");
+  });
+
+  it("should contain icon when input is a safe Icon", () => {
+    const icon = svgIcon`<svg><text x="0" y="15">safe icon</text></svg>`;
+
+    component.icon = icon;
+    fixture.detectChanges();
+
+    const el = fixture.nativeElement as HTMLElement;
+    expect(el.innerHTML).toBe(`<svg><text x="0" y="15">safe icon</text></svg>`);
+  });
+});