Material Design Icon - md-icon 标签在 Mozilla Firefox 上不起作用答案

【问题标题】：Material Design Icon - md-icon tag is not working on Mozilla FirefoxMaterial Design Icon - md-icon 标签在 Mozilla Firefox 上不起作用
【发布时间】：2016-12-29 22:07:09
【问题描述】：

我按照Material Design Icon 中的自托管步骤进行操作同时使用 Angular Material 的 md-icon 而不是 i 标签。

虽然代码在 Google Chrome 和 Internet Explorer 9 上运行顺畅，但我在 Mozilla Firefox 48.0.1 上运行代码时遇到问题。

使用 Firefox 时，控制台日志显示以下消息至少 3 次：

downloadable font: download failed (font-family: "Material Icons" style:normal weight:normal stretch:normal src index:2): bad URI or cross-site access not allowed source: file:///D:/Atom%20Projects/kenobi/node_modules/material-design-icons/iconfont/MaterialIcons-Regular.woff2

其他细节：

我的HTML：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="../node_modules/angular-material/angular-material.min.css">
    <link rel="stylesheet" href="../node_modules/material-design-icons/iconfont/material-icons.css">
    <script src="../node_modules/angular/angular.min.js"></script>
    <script src="../node_modules/angular-material/angular-material.min.js"></script>
    <script src="../node_modules/angular-aria/angular-aria.min.js"></script>
    <script src="../node_modules/angular-animate/angular-animate.js"></script>
    <script src="../app/test-package/test.js"></script>
  </head>

  <body ng-app="TestModule">
    <md-icon class="material-icon" style="color: #000000;">face</md-icon>
    <md-radio-button
  </body>

</html>

我的 Javascript：

var app = angular.module("TestModule", ["ngMaterial"]);

----------------------编辑------------ ----------------------

同样的错误不是显示3次而是显示如下：

downloadable font: download failed (font-family: "Material Icons" style:normal weight:normal stretch:normal src index:2): bad URI or cross-site access not allowed source: file:///D:/Atom%20Projects/kenobi/node_modules/material-design-icons/iconfont/MaterialIcons-Regular.woff2

downloadable font: download failed (font-family: "Material Icons" style:normal weight:normal stretch:normal src index:3): bad URI or cross-site access not allowed source: file:///D:/Atom%20Projects/kenobi/node_modules/material-design-icons/iconfont/MaterialIcons-Regular.woff

downloadable font: download failed (font-family: "Material Icons" style:normal weight:normal stretch:normal src index:4): bad URI or cross-site access not allowed source: file:///D:/Atom%20Projects/kenobi/node_modules/material-design-icons/iconfont/MaterialIcons-Regular.ttf

【问题讨论】：

您是在本地托管应用程序还是只是打开 html 文件？
@Alok 只是在浏览器上打开 HTML 文件
啊！那可能是你的问题。我不是专家，但会告诉您，当您尝试下载文件时，浏览器会将其他文件视为 XSS 攻击。尝试在节点中托管 Angular 应用程序或使用 grunt watch。

标签： angularjs firefox material-design angular-material

【解决方案1】：

您可以查看this answer 了解有关您的问题的更多详细信息。您的问题可以通过托管您的 Angular 应用程序来解决。我会建议将 Grunt 与手表一起使用。它易于设置和开始，还可以让您实时重新加载。你可以在这里阅读更多相关信息：Grunt Watch

托管您的应用程序也是一种很好的做法，因为它使您的应用程序在行为上更接近实际应用程序。

【讨论】：