Angular Font Awesome in google.maps.InfoWindow

Display Font Awesome 5 icon in Google Maps Info Window (API)

FA5 works as expected in my Angular application when used in the html templates. But when using the google.maps.InfoWindow we're outside Angular, and I'm not able to use e.g

<fa-icon [icon]="['fas', 'location-arrow']"></fa-icon> in the content html string.

We also want everything to be packaged before runtime, so no runtime calls for js or css for FA.

The Google Maps info window has a button like this:

drawInfoWindow() {
    this.infowindow = new google.maps.InfoWindow({
        content:
        "<div class='info-window'>"+
        "<button type='button' class='btn btn-vn btn-md btn-default'><div class='fas-wrapper'><fa-icon [icon]=\"['fas', 'location-arrow']\"></fa-icon></div> Navigate</button>"+
        "</div>"
    });
}

I also added "./node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss", to angular.json in case it could be of any use.

Before upgrading to FA5, I used <i class='fas fa-location-arrow'></i>, which worked well, but then I also used the kit.fontawesome.com/*** in my index.html.

I take it that I have to manually render the icon in my map-component.ts file, and pass it in to my drawInfoWindow function? But I'm at a loss as to where to start. Any suggetions?

Cheers!

After importing

import { icon } from '@fortawesome/fontawesome-svg-core';
import { faLocationArrow } from '@fortawesome/free-solid-svg-icons';

I could use the icon function in my info window content html: icon(faLocationArrow).html

Thank you to Yaroslav Admin!