javascript - Visual Studio 2013 中的 Angular Material 图标注册

Question

我是 Angular Material 的新手，只想使用它的图标，一直在阅读它，但说我必须注册它，但不知道如何获取 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

使用 Angular Material 设置 Google Material 图标的步骤

按照这 5 个步骤，我按照 Amit Shukla 指南在项目中使用 Material 图标。

1. 在 index.html 的 head 元素中。

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

2. 在实用程序文件夹中，我设置了一个自定义 Material 模块。

   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 图标放入 asset 文件夹内的图标文件夹中

   /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>