How can I pass tailwind classes to fontawesome in Angular-CodePudding

I am using the Angular FontAwesome package to handle icons in my project.

Following the docs, I am able to render my icon like this from my component:

...
import { faSignOut } from '@fortawesome/free-solid-svg-icons';

...
export class MyComponent implements OnInit {
    @HostBinding('class') classes = 'h-full';

    faSignOut = faSignOut;
    
    ...
}

My template looks like this:

<fa-icon [icon]="faSignOut" ></fa-icon>

The icon is rendered, but the tailwind classes are placed on the <fa-icon>.

I can manually code the items, but I would like to pass the names of the icon from my component to my template from a loop.

How can I pass the h-6 w-6 class from the <fa-icon> to the generated svg?

For example:

<fa-icon >
    <svg >...</svg>
</fa-icon>

CodePudding user response：

You can pass custom classes from [classes] property binding in array format. Docs Reference

<fa-icon [icon]="faSignOut" [classes]="['h-6', 'w-6']">
</fa-icon>