Angular google.maps.InfoWindow中的角度字体

在谷歌地图信息窗口（API）中显示字体5图标

当在html模板中使用FA5时，它在我的Angular应用程序中的工作与预期一样。但是当使用

google.maps.InfoWindow

时，我们的角度太大了，我不能使用例如

在内容html字符串中

我们还希望在运行时之前打包所有内容，这样就不会在运行时调用js或css for FA

“谷歌地图信息”窗口有如下按钮：

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>"
    });
}

drawInfoWindow（）{
this.infowindow=new google.maps.infowindow({
内容：
""+
“导航”+
""
});
}

我还向angular.json添加了

”/node_modules/@fortwawesome/fontwawesome free/scss/fontwesome.scss“，

，以防它有任何用途

在升级到FA5之前，我使用了

， 这很有效，但是我在index.html中也使用了kit.fontawesome.com/***

我认为我必须手动渲染map-component.ts文件中的图标，并将其传递给我的

drawInfoWindow

函数？但我不知道从哪里开始。有什么建议吗

干杯

导入后

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

我可以在我的信息窗口内容html中使用图标功能：

图标（faLocationArrow）.html

---

谢谢你的雅罗斯拉夫管理员

一,。是的，对于此用例，您需要手动呈现SVG。您可以使用

@fortawesome/fontawesome svg core

包中的

icon

函数将图标名称转换为呈现的svg（请检查此项，如果需要进一步帮助，请告诉我）。2.至于自动CSS插入，我建议使用来自

@fortawesome/fontawesome svg core

的样式，因为fa图标组件使用这些样式（请参阅）。非常感谢您的回答！我看过你的评论和那里的链接，但我有点太新了，不知道该怎么做。由于我在谷歌地图信息窗口中需要这个，所以我不能使用对HTML模板文件的引用。将my

drawInfoWindow

函数的内容包装在

中也不起作用，因为它是外部的。您知道一个不使用html模板#ref显示图标的示例吗？当然，在信息窗口

content

output中编写整个svg字符串是可行的，但我不想这样做：）我不是Google Maps API的专家，但从您的示例来看，它似乎希望您将内容作为字符串与HTML一起传递<代码>图标函数是获取图标标记的最干净的方法。我真的不知道在这种情况下需要使用多大的角度，也不知道有多大的帮助。非常感谢！我所要做的就是从“@fortawesome/fontawesome svg核心”导入{icon}；从“@fortawesome/free solid svg icons”导入{faLocationArrow}然后在我的信息窗口内容中使用

图标（faLocationArrow）.html

。再次感谢！