Css 材质图标有时不会'；t在移动web浏览器上加载

我目前正在构建一个VueJS单页web应用程序，并且我正在根据自己的需要自托管材质图标。我正在使用webpack v3.6捆绑我的资产，并使用

“prerender spa plugin”：“^3.4.0”

为SEO目的预呈现我的一些路线

我面临的问题是，当我在移动设备（即iOS）上加载我的web应用程序时，材料图标通常不会加载并保持以下状态。出现这种情况时，刷新页面似乎无法解决问题。通常情况下，我需要等待一段时间才能打开不同的浏览器并加载相同的页面，以便再次正确加载图标。但是，也有图标加载成功的情况。更令人困惑的是，当我在手机上访问我的网站时，这个问题似乎对我产生了严格的影响（因为我只拥有一台iOS设备，所以我没有机会在Android上进行测试）。我从未在使用任何桌面浏览器时遇到过这个问题。我的自托管材质图标是否错误，这就是为什么会发生这种情况？

下面是my_fonts.scss文件中的CSS。如您所见，我已通过npm安装了

“材质设计图标”：“^3.0.1”

，我的URL指向“材质设计图标”包中的字体文件

我的app.scss文件只是以以下方式导入_fonts.scss文件

@import "fonts";

---

将其放在标题中：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

例如：

<i class="material-icons">add</i>

添加

---

官方链接

将其放在标题中：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

例如：

<i class="material-icons">add</i>

添加

---

官方链接

除了自我托管之外？我考虑过这一点，但我觉得加载两次样式表（一次通过自托管，另一次通过您共享的CDN）可能会带来其他问题。理想情况下，我只需正确加载一次样式表，但显然有问题……另一种方法是，除了自托管之外，在style.css（或style.scss）@import“”中添加以下行？我考虑过这一点，但我觉得加载两次样式表（一次通过自托管，另一次通过您共享的CDN）可能会带来其他问题。理想情况下，我只需正确加载一次样式表，但显然有问题……另一种方法是，在style.css（或style.scss）@import中添加以下行