FontAwesome Pro icons not showing in Angular project - font-awesome

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",
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"
],
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.
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