FontAwesome Pro icons not showing in Angular project

Question

I am building Angular 8 App. We have font awesome pro license and I have followed the instructions from the following URL:

https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers

In my package.json:

   "devDependencies": {
        "@angular-devkit/build-angular": "~0.803.21",
        "@angular/cli": "~8.3.21",
        "@angular/compiler-cli": "~8.2.14",
        "@angular/language-service": "~8.2.14",
        "@fortawesome/fontawesome-pro": "^5.7.1",

2. In my angular.json:

   "styles": [ "./node_modules/ngx-bootstrap/datepicker/bs-datepicker.scss", "node_modules/@fortawesome/fontawesome-pro/css/all.css", "src/app/shared/styles/main.scss" ],

3. In my .npmrc file: I have replaced my Auth token

   @fortawesome:registry=https://npm.fontawesome.com/ //npm.fontawesome.com/:_authToken=${FONTAWESOME_NPM_AUTH_TOKEN}

Upon providing the above steps.

1. In my app.component.html file: Bootstrap with Fontawesome

     <button type="button" class="btn button">
                        Start Free Trial<i
                            class="fal fa-sync fa-lg"
                            style="color:black"
                        ></i>
                    </button>

I still cannot see my icon :( When I inspect the element I can see the tag, played around a bit by changing various attributes of tag and replaced with tag still no luck.

Below is the screenshot:

Any help would be great. Thanks