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

回答

相关问题