Problems when using standalone provider with projected content

[RobinH0ed]

Hi Guys,

Recently I tried migrating from the deprecated NgModule setup to providing icons using provideTablerIcons standalone manner. When doing this I noticed a "bug" where if you put a component into a ng-content slot of another component, and they both provide different icons, that the projected content loses it's provided icons.

Simple example. Lets say you have a button directive on which you can also choose to add a icon (from a limited set of possible icons) prefixed to its content:

@Component({
  selector: 'button[myButton]',
  template: `
    @if (icon(); as icon) {
      <i-tabler [name]="icon" />
    }
    <ng-content />
  `,
  providers: [provideTablerIcons( { IconAt } )], // Note: no "IconArrowRight" in here
})
export class ButtonDirective {
  readonly icon = input<'at' | undefined>();
}

Now if someone uses this button directive, and for some reason chooses to put another icon (as projected content):

@Component({
  template: `
    <button myButton>
       <i-tabler name="arrow-right" />Click me!
    </button>
  `,
  imports: [ButtonDirective, TablerIconComponent],
  providers: [provideTablerIcons( { IconArrowRight} )],
})
export class MyComponent {}

In this case the provider of the ButtonDirective overwrites the provider of the parent component. Causing the used arrow-right icon not to be available.
Of course this example is just wrong usage of the button but there might be similar uses cases where this would be a actual problem.

For now I can work around it by providing the icons using viewProviders instead of providers to limit the scope of the provider to the component template, ignoring the projected content.

Maybe you guys know of a better solution, but to me it feels like it might now be preferrable to simply always use viewProviders
What is the best way to go about this?