Visual Studio 2013中的Angular Material Icons注册

Question

我是角质材料的新手，只想使用它的图标，一直在阅读它，但说我必须注册它，但不知道如何获得svg图标集。我做了什么：1。使用URL下载图标

1：来自http://google.github.io/material-design-icons/部分的 2.将所有图标放在md / icons / .....下并将其配置为

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

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

谢谢。

Answer 1

Steps to Setup Google Material Icons with Angular Material

按照这5个步骤，我在Amit Shukla指南之后的项目中使用Material Icons。

1. 在index.html的head元素中。 <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
2. 在实用程序文件夹中，我设置了自定义材料模块。

   import { NgModule } from '@angular/core';
   import { FormsModule, ReactiveFormsModule } from '@angular/forms';
   import { BrowserAnimationsModule,NoopAnimationsModule } from 
   '@angular/platform-browser/animations';
   import {
              MatButtonModule,
              MatCheckboxModule,
              MatFormFieldModule,
              MatDialogModule,
              MatTabsModule,
              MatProgressSpinnerModule,
              MatMenuModule,
              MatIconModule,
              MatInputModule,
              MatSelectModule,
              MatToolbarModule,
              MatCardModule,
              MatChipsModule,
              MatListModule,
              MatTooltipModule,
              MatNativeDateModule,
              MatDatepickerModule,
              MatTableModule,
              MatPaginatorModule,
              MatProgressBarModule,
              MatSortModule,
              MatSnackBarModule,
              MatStepperModule,
              MatGridListModule,
              MatExpansionModule,
              MatRadioModule,
              MatBadgeModule
              } from '@angular/material';
      import {BrowserModule} from '@angular/platform-browser';
      import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
      import {DomSanitizer} from '@angular/platform-browser';
      import {MatIconRegistry} from '@angular/material';
      @NgModule({
          imports: [
              FormsModule,
              ReactiveFormsModule,
              BrowserAnimationsModule,
              MatButtonModule,
           MatCheckboxModule,
           MatFormFieldModule,
           MatDialogModule,
           MatTabsModule,
           MatProgressSpinnerModule,
           MatMenuModule,
           MatIconModule,
           MatInputModule,
           MatSelectModule,
           MatToolbarModule,
           MatCardModule,
           MatChipsModule,
           MatListModule,
           MatTooltipModule,
           MatNativeDateModule,
           MatDatepickerModule,
           MatTableModule,
           MatPaginatorModule,
           MatProgressBarModule,
           MatSortModule,
           MatSnackBarModule,
           MatStepperModule,
           MatGridListModule,
           MatBadgeModule,
           MatExpansionModule,
           MatRadioModule,
           MatBadgeModule
           ],
       exports: [
           BrowserAnimationsModule,
           MatButtonModule,
           MatFormFieldModule,
           MatCheckboxModule,
           MatTabsModule,
           MatProgressSpinnerModule,
           MatMenuModule,
           MatIconModule,
           MatInputModule,
           MatSelectModule,
           MatToolbarModule,
           MatCardModule,
           MatChipsModule,
           MatListModule,
           MatTooltipModule,
           MatNativeDateModule,
           MatDatepickerModule,
           MatTableModule,
           MatPaginatorModule,
           MatProgressBarModule,
           MatSortModule,
           MatSnackBarModule,
           MatStepperModule,
           MatGridListModule,
           MatBadgeModule,
           MatExpansionModule,
           MatRadioModule,
           MatBadgeModule
           ],
       declarations: []
       })
       export class CustommaterialModule {
           constructor(iconRegistry: MatIconRegistry, sanitizer:DomSanitizer) 
                {
                   iconRegistry.addSvgIcon(
                       'linkedin',
                       sanitizer.bypassSecurityTrustResourceUrl('../../assets/icons/linkedin.svg'));
                }
        }

3. 将svg图标放在assets文件夹内的icons文件夹中

   /app
   /assets
      /icons
          linkedin.svg

4. 将CustomMaterialModule和BrowserAnimationsModule或NoopAnimationsModule添加到app.module.ts中的导入中

   import { BrowserAnimationsModule, NoopAnimationsModule } from 
   '@angular/platform-browser/animations';
   import { CustommaterialModule } from './utilities/custommaterial.module';

5. 在您的component.html内

   <mat-icon matTooltip="Write any pop up info"
   svgIcon="linkedin">LinkedIn </mat-icon>

Answer 2

另一种方式（为简洁起见，不包括每个文件的每一行）：

1. 将MatIconModule添加到app.module.ts

import { MatIconModule } from '@angular/material/icon';

@NgModule({
  imports: [MatIconModule]
})

2. 将MatIconRegistry和DomSanitizer添加到app.component.ts

import { MatIconRegistry } from '@angular/material';
import { DomSanitizer } from '@angular/platform-browser';

export class AppComponent {
  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {}
}

3. 将您要使用的svg图标添加到AppComponent中的构造函数中

import { MatIconRegistry } from '@angular/material';
import { DomSanitizer } from '@angular/platform-browser';

export class AppComponent {
  constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    iconRegistry.addSvgIcon(
      'name-of-icon',
      sanitizer.bypassSecurityTrustResourceUrl('path-to-icon-in-your-app')
    );
  }
}

name-of-icon将是您在html模板中使用的名称。 path-to-icon-in-your-app是应用中图标文件所在的位置。理想情况下，这是在assets文件夹中。

4. 在这种情况下，将图标添加到html模板app.component.html

<mat-icon svgIcon="name-of-icon"></mat-icon>

Answer 3

Google Material Icons

默认情况下，Angular Material支持Google Material Icons，但它不会自动为您添加图标。 （另外，你不必使用app.config！）

1. 在HTML下的<head>中添加以下行： <link href="https://fonts.googleapis.com/icon?family=Material+Icons|Roboto:300,400,500" rel="stylesheet"> <!-- <- Note: this also includes the Roboto font -->

注意：更多信息here

2. 通过<md-icon>指令使用它（用你想要的图标替换menu; Material.io上有一个图标列表： <md-icon>menu</md-icon>

例：

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

<html ng-app="App">

<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons|Roboto:300,400,500" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular-messages.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.css">
</head>

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

</html>

Icon sets

或者，您可以使用图标集。请按照以下说明操作：

1. 下载图标集（例如MaterialDesignIcons > mdi.svg并将其放置在项目中的某个位置（例如您的assets文件夹），您可以从中获取。
2. 添加用于声明app.config下的图标集的配置：

   angular.module('App', ['ngMaterial'])
       .config(function($mdIconProvider, $sceDelegateProvider) {
           $mdIconProvider.defaultIconSet('path/to/icons.svg');
           // Note: If you want to get a 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
               // Note: It's recommended to only specify the given domain you want to allow.
               '**'
       )
   })

3. 通过<md-icon>指令使用它，但是为它添加一个md-svg-icon属性，其中包含您想要的SVG图标的名称： <md-icon md-svg-icon="menu"></md-icon>

例：

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

<html ng-app="App">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular-animate.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular-aria.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.2/angular-messages.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.8/angular-material.min.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
</head>

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

</html>