0

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!

Hans Magnus
  • 61
  • 9
  • 1
    1. Yes, you will need to render SVG manually for this use case. You can use `icon` function from `@fortawesome/fontawesome-svg-core` package to convert icon name into the rendered SVG (check this [comment](https://github.com/FortAwesome/angular-fontawesome/issues/72#issuecomment-466410777) and let me know if you need further help). 2. As for the automatic CSS insertion, I would recommend to use styles from `@fortawesome/fontawesome-svg-core` as they are used by the fa-icon component (see [here](https://github.com/FortAwesome/angular-fontawesome/issues/48#issuecomment-432543956)). – Yaroslav Admin Sep 23 '19 at 14:19
  • Thank you very much for answering! I had a look at your comment and the links there, but I'm a bit too new to Angular. As I need this in a Google Maps Info Window, I can't use a reference to the HTML template file. Wrapping the content of my `drawInfoWindow` function in `` doesn't work either, as it is outside Angular. Do you know of an example of rendering the icon without using a html template #ref for displaying it? Of course it does work to write the whole svg string in the info window `content` output, but I'd rather not do that :) – Hans Magnus Sep 24 '19 at 08:13
  • 1
    I'm not a big expert in Google Maps API, but from your example it looks like it wants you to pass the content as a string with HTML. `icon` function is the most clean way to acquire the icon markup. I don't really see how Angular needs to be used or can help in this case. – Yaroslav Admin Sep 24 '19 at 10:10
  • Thank you very much! All I had to do was ```import { icon } from '@fortawesome/fontawesome-svg-core'; import { faLocationArrow } from '@fortawesome/free-solid-svg-icons';``` and then use `icon(faLocationArrow).html` in my info window content. Thanks again! – Hans Magnus Sep 24 '19 at 10:58

1 Answers1

1

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!

Hans Magnus
  • 61
  • 9