Changing styles of fontawesome icons

Issue

I am using font awesome icons in my angular code. My code is as follows:

component.ts:
import { faSquare } from '@fortawesome/free-solid-svg-icons';

 faSquare =faSquare;

html:

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

I want to change width, height and rotate this square by 45 degree. I tried giving styles using inline styling but it is not working. How to do that?

Solution

You can provide inline styles to the icon as:

    <fa-icon [icon]="faSquare" [styles]="{height: '30px', width: '30px', transform: 'rotate(45deg)'}"></fa-icon>

Output:

You can also refer the Features documentation to explore more.

Answered By - Siddhant