Angular Material：找不到md-icon

我使用的是svg格式的材質設計圖標。當我嘗試在我的html中顯示圖標時，出現錯誤：「圖標mdsize：未找到」。Angular Material：找不到md-icon

我把所有的圖標保存在一個svg文件中，包含所有路徑。

我config.js文件：

app.config(function($mdIconProvider){ 
    $mdIconProvider.iconSet('mdsize', 'fileSrc', 24); 
});

我的SVG文件：

<g id="A"> 
    <path d="iconPath" fill="none"/> 
    <path d="anotherPath"/> 
</g>

我的HTML：

<md-icon md-svg-icon="mdsize:A"></md-icon>

的MD-圖標標籤是MD-列表 - 內由ng-repeat生成的項目。

重要提示：還有另一個md圖標保存在md-list-item中的同一個svg文件中，它顯示在html頁面上。呈現他們的方式是iddenticle，所以我不明白爲什麼其他圖標不會顯示。

來源

2016-09-22 Einat Lugassy

我對svg瞭解不多，但是我已經有了一個遊戲，而且這個遊戲沒有錯誤。

fileSrc.txt

<svg width="100" height="100"> 
    <g id="A"> 
     <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> 
    </g> 
</svg>

的test.html

<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.css"> 

    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script> 
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script> 
    <script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script> 

    <script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0/angular-material.min.js"></script> 

    <script> 
     angular.module("elcomaApp", ['ngMaterial', 'ngMessages', 'material.svgAssetsCache']) 
      .config(function($mdIconProvider){ 
       $mdIconProvider.iconSet('mdsize', 'fileSrc.txt', 204); 
      }) 
      .controller("MainController", function() { 

      }); 
    </script> 
</head> 

<body ng-app="elcomaApp" ng-controller="MainController" ng-cloak> 
    <md-icon md-svg-icon="mdsize:A"></md-icon> 
</body> 
</html>

如果我更換fileSrc.txt與下面我還沒有看到任何錯誤的內容：

<svg width="100" height="100"> 
    <g id="A"> 
     <path d="iconPath" fill="none"/> 
     <path d="anotherPath"/> 
    </g> 
</svg>

注意：這些文件可以在Firefox中使用，但Chrome會顯示「Cross origin」錯誤。

來源

2016-09-22 11:55:17

Angular Material：找不到md-icon

回答

相關問題