0

I followed the Self Hosting steps in Material Design Icon while using Angular Material's md-icon instead of the i tag.

While the code is running smoothly on Google Chrome and Internet Explorer 9, I am having a problem running the code on Mozilla Firefox 48.0.1.

While using Firefox, the console log shows the message below for at least 3 times:

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

Other details:

My 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>

My Javascript:

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

----------------------------------EDIT----------------------------------

The same error isn't displayed 3 times but displayed as follows:

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
Michael 'Maik' Ardan
  • 4,213
  • 9
  • 37
  • 60
  • are you hosting your application locally or just opening the html file ? – Alok Aug 23 '16 at 07:38
  • @Alok Just opening the HTML file on browser – Michael 'Maik' Ardan Aug 23 '16 at 07:41
  • Ah! That might be your problem then. I am not an expert but will tell you that browsers treat other files as XSS attacks when you try to download files. Try hosting the angular application in node or use grunt watch. – Alok Aug 23 '16 at 07:47

1 Answers1

1

You can see 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

It is also a good practice to host your application for it brings it a level closer in behavior to real application.

Community
  • 1
  • 1
Alok
  • 1,290
  • 1
  • 11
  • 21