PrimeNG changed the icon mechanics of the ui components. I want my custom Checkbox Icon.

Touching the html is not an option, but using a directive instead.

I want to insert the icon template of the checkbox via directive

I am trying something like this

<p-checkbox checkboxIcon>
  <!-- this is not an OPTION
    <ng-template pTemplate="icon">
      <custom-icon></custom-icon>
    </ng-template>
  -->
</p-checkbox>

I somehow want to create the TemplateRef in the directive and insert it.

@Directive({
  selector: '[checkboxIcon]',
})
export class IconDirective implements OnInit {
  constructor(
    private element: ElementRef,
    @Self() private checkbox: Checkbox
  ) {}

  @HostListener('click', ['$event']) onModelChange(event): void {
    this.appendIconTemplate();
  }

  appendIconTemplate(): void {
    const iconTemplate = document.createElement('ng-template');
    iconTemplate.setAttribute('pTemplate', 'icon');
    iconTemplate.innerHTML = '<custom-icon></custom-icon>';
    this.element.nativeElement.appendChild(iconTemplate);
  }
}

I have a minimal reproduction of the issue here

Found something with @Self() and ComponentFactoryResolver. But never worked with that, can anyone help?

I think those questions here and here want to achieve something similar.