Global override of icons in primeng components

[alexciesielski]

Currently there is no easy way to use a custom icon component in places like menu items, other than completely overriding the menu item's template. Ideally I would keep primeng's default item template but still have the possibility to use a different icon set / component.

Proposal: define a global injection token

interface PIconComponent {
  icon: string;
}

const PRIMENG_ICON_COMPONENT = new InjectionToken<Type<PIconComponent>>('PRIMENG_ICON_COMPONENT');

which by default would be a default icon component (to be implemented) whose template would simply consist of <i [class]="icon" />, where icon would be an Angular @Input and would receive the icon property of the menu item, like so:

@Component({
  template: `<i [class]="icon" />`
})
class Icon implements PIconComponent {
  @Input() icon!: string;
}

This way I could define my own Angular component which would implement the above interface, and which I could then provide using the injection token, and next primeng would inject the token in every component that makes use of primeng's icons and render it, like so:

@Component({ ... })
class Menu {
  protected readonly iconComponentClass = inject(PRIMENG_ICON_COMPONENT);
}

@for(item of menuItems) {
   <ng-container *ngComponentOutlet="iconComponentClass; inputs: { icon: item.icon }" /> 
}

This would be a lot cleaner than the current suggested solution, it would also apply globally and not only for single icons across some components.

I would be willing to implement this if given the green light.

---

Actually it was such an easy thing to implement I went ahead and did it here.

Let me know your toughts there.