我是新角材料，只是想使用它的图标，一直在阅读有关它，但说我必须注册它，但不知道如何获得svg图标。我所做的： 1.下载图标从使用URL在Visual Studio 2013中角材料图标注册

1：http://google.github.io/material-design-icons/从放置在MD /图标的所有图标的部分 2/.....和配置它作为

.config(function ($mdIconProvider) { 
    $mdIconProvider.defaultIconSet('md/icons/core-icons.svg', 24); 
})

但不知道如何获取设置并在应用程序中使用它们。有人可以在这里指导我。

谢谢。

来源

2017-06-19 Scavenger

谷歌材料图标

默认情况下，角材料支持谷歌材料的图标，但它不会自动添加图标为您服务。（另外，你不必使用app.config！）

以下行添加到您的HTML下<head>：

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

注：更多信息here

通过使用它指令（用所需的图标替换菜单;在https://material.io/icons图标：
```
<md-icon>menu</md-icon> 
```

例子：

angular.module('App', ['ngMaterial']);

<html ng-app="App"> 
 

 
<head> 
 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-animate.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-aria.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-messages.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.js"></script> 
 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.css"> 
 
</head> 
 

 
<body> 
 
    <md-icon>menu</md-icon> 
 
</body> 
 

 
</html>

图标集

或者，您也可以使用图标集。按照intstructions如下：

下载图标集（例如MaterialDesignIcons >mdi.svg某处放置在您的项目（如您的assets文件夹），你可以从得到。

配置app.config下：

angular.module('App', ['ngMaterial']) 
    .config(function($mdIconProvider, $sceDelegateProvider) { 
     $mdIconProvider.defaultIconSet('path/to/icons.svg'); 
     // Note: If you want to get svg iconset from another domain, add $sceDelegateProvider to function as follows: 
     $sceDelegateProvider.resourceUrlWhitelist(
      // Adding 'self' to the whitelist, will allow requests from the current origin. 
      'self', 
      // Allow from all urls 
      // Recommended to only specify the given domain you want to allow. 
      '**' 
    ) 
})

通过<md-icon>指令中使用它，但增加md-svg-icon属性给它：
```
<md-icon md-svg-icon="menu"></md-icon> 
```

例：

angular.module('App', ['ngMaterial']) 
 
    .config(function($mdIconProvider, $sceDelegateProvider) { 
 
     $sceDelegateProvider.resourceUrlWhitelist([ 
 
     'self', 
 
     '**' 
 
     ]) 
 
    $mdIconProvider.defaultIconSet('https://chan4077.github.io/res/mdi.svg'); 
 
})

<html ng-app="App"> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-animate.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-aria.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.11/angular-messages.min.js"></script> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.js"></script> 
 
    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.css"> 
 
</head> 
 

 
<body> 
 
    <md-icon md-svg-icon="menu"></md-icon> 
 
</body> 
 

 
</html>

来源

2017-06-19 15:56:15 Edric

可否请你从头开始描述完整的过程。 – Scavenger

而且，我如何获得并注册svg集？ – Scavenger

嗨Edric，在**图标集**示例如何在本地托管图标集，如何或从哪里下载svg图标集并在我的项目中使用它们？ – Scavenger

在Visual Studio 2013中角材料图标注册

回答

谷歌材料图标

图标集

相关问题