Showcasing a Font Awesome 5 icon within a Google Maps Info Window (API)
Font Awesome 5 functions correctly in my Angular application when utilized in the HTML templates. However, when using the google.maps.InfoWindow outside of Angular, I encounter difficulties incorporating elements such as
<fa-icon [icon]="['fas', 'location-arrow']"></fa-icon>Moreover, we aim to have all components pre-packaged before runtime, eliminating any runtime calls for JS or CSS related to Font Awesome.
The Google Maps info window contains a button similar to 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>"
});
}
For potential reference, I have also included
"./node_modules/@fortawesome/fontawesome-free/scss/fontawesome.scss",Prior to transitioning to FA5, I utilized
<i class='fas fa-location-arrow'></i>I assume I must manually render the icon within my map-component.ts file and then pass it to the drawInfoWindow function. Nevertheless, I feel uncertain about how to begin this process. Any recommendations?
Cheers!