Angular 11 - Add icons with different styles to a custom button component

In my Angular 11 App I've implemented a custom button component. For styling I use TailwindCSS and TailwindUI.

The button can have multiple colors(red, blue, gray, etc) and also different sizes (xs, sm, md, lg, xl).

I want to create a variant for these buttons: a button with a leading icon, as shown here: https://tailwindui.com/components/application-ui/elements/buttons#component-8a4b7248253ad4c9ee892c655d7ff5ec.

For the icons, I use the following library: https://ng-heroicons.dimaslz.dev/

An icon is a component, like: <mail-solid-icon></mail-solid-icon>, <bookmark-solid-icon></bookmark-solid-icon> etc.

Because of the different sizes (xs, sm, md, lg, xl) of the button, I need to add custom Tailwind classes to the icon. For example:

<app-button [size]="'xs'">
  <mail-solid-iconclass="-ml-0.5 mr-2" [size]="16"></mail-solid-icon>
  Button text
</app-button>

<app-button [size]="'xl'">
  <bookmark-solid-icon class="-ml-1 mr-3 h-5 w-5" [size]="20"></bookmark-solid-icon>
Button text

Desired result:

I want to be able to provide only the icon component and then, in button's component class, to add the classes -ml-0.5 mr-2, or -ml-1 mr-3 h-5 w-5; as well as the size property.

Example of use in a template:

 <app-button [size]="'xl'">
  <bookmark-solid-icon></bookmark-solid-icon>
   Button text
 </app-button>

Output:

<app-button [size]="'xl'">
  <bookmark-solid-icon class="-ml-1 mr-3 h-5 w-5" [size]="20"></bookmark-solid-icon>
   Button text
 </app-button>

I've tried to use a custom directive and get it using @ContentChild, but I can't add the classes to it.

Thanks!

Stackblitz example: https://stackblitz.com/edit/angular-ivy-6gpcby?file=src%2Fapp%2Fbutton%2Fbutton.component.ts

from Angular 11 - Add icons with different styles to a custom button component