I have a directive that’s supposed to add an icon to the targeted element. It works today by setting the innerHTML to SVG as a string. Now, I’d like to improve it, so I declared a custom component that encapsulates the icon.

@Component({
  selector: 'app-icon',
  template:'<svg ...><path ... /></svg>' ...]
})
export class IconComponent {}

The problem is that the custom component won’t render. A default component will, though, so I sense that my setup is correct.

@Directive({ selector: '[appSortable]' })
export class SortableDirective {

  constructor(
    private element: ElementRef,
    private renderer: Renderer2) {
    this.target = element.nativeElement as HTMLElement;
  }

  @HostListener("mouseenter")
  onMouseEnter() {
    const mark1 = this.renderer.createElement("app-icon-sort-asc");
    const mark2 = this.renderer.createElement("button");
    this.renderer.appendChild(this.target, mark1);
    this.renderer.appendChild(this.target, mark2);
  }
}

I’ve googled it a few times now but I’m confused: there’s no “single strategy”, different blogs discuss it from different angles. Also, quite a few resources are based on factory resolver, which is deprecated. I’m on Angular 16 and I can’t determine which way to focus. I ahven’t found out-of-the-box solution so I’ll need to assemble one myself based on docs and other resources. However, since those are quite heterogenious, I get stuck in uncertainty.

• Do I need to convert my icon component into web component?
• Do I need to follow the is attributation?
• Do I need to apply createCustomElement somehow?