Material 设计图标 - md-icon 标签在 Mozilla Firefox 上不起作用

Question

我遵循了 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

Answer 1

可以看到this answer for more details on your problem. Your problem can be resolved by hosting your angular application. I will suggest using Grunt with watch. It is easy to setup and start with and also gives you live-reload. You can read more about that here: Grunt Watch

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

Material 设计图标 - md-icon 标签在 Mozilla Firefox 上不起作用

Material Design Icon - md-icon tag is not working on Mozilla Firefox

firefox

angularjs

material-design

angular-material