FontAwesome Icons Not Displaying in Nativescript (Angular) App in Preview Mode?

Question

I am working on an app in Nativescript Angular.

I created the app using the template ns create my-drawer-ng --template @nativescript/template-drawer-navigation-ng

After creation of project, I ran "ns preview".

Opened the Preview App and the app is loaded. The issue is with the Icons, its not getting displayed.

I tried with latest fontawesome fonts as well. still having the same problem. Please help me here.

    <GridLayout class="page__content">
      <Label class="page__content-icon fas" text="&#xf015;"></Label>
      <Label class="page__content-placeholder" text="Home Page"></Label>

    fonts.scss
    // Font icon class
    .fab {
      font-family: 'Font Awesome 6 Brands', 'fa-brands-400';
      font-weight: 400;
    }
    
    .fas {
      font-family: 'Font Awesome 6 Free', 'fa-solid-900';
      font-weight: 900;
    }
    
    .far {
      font-family: 'Font Awesome 6 Free', 'fa-regular-400';
      font-weight: 400;
    }