Change height of svg icon fa-edit on angular project

Issue

What i need to is to edit the height of the icon to 1.5em instead of 1em. But i can't seem to find .svg-inline--fa. I don't have any CSS files for the icons cause i used npm install.

Commands that i run to download the svg icons on angular

npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/angular-fontawesome

Fortawesome: https://github.com/FortAwesome/Font-Awesome

<fa-icon [icon]="faEdit" size="lg" (click)="open(content)">Edit</fa-icon>

When i inspect element, this is the CSS of the icon

.svg-inline--fa {
    display: inline-block;
    font-size: inherit;
    height: 1em;
    overflow: visible;
    vertical-align: -0.125em
}

Also imported import { faEdit } from '@fortawesome/free-solid-svg-icons'; to my component ts

Update: Use e.g. transform="down-5" to move the icon down.

Solution

You can just edit the size of you icon with transform in you html component.

Like this:

<fa-icon [icon]="['fas', 'coffee']" transform="shrink-9 right-4"></fa-icon>

Check fontawesome advanced usage

Answered By - Shifenis