我是新角材料，只是想使用它的圖標，一直在閱讀有關它，但說我必須註冊它，但不知道如何獲得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中角材料圖標註冊

回答

谷歌材料圖標

圖標集

相關問題