我是 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);
})
但不知道如何获取这些集合并在应用程序中使用它们。有人可以在这里指导我吗?
谢谢。
最佳答案
使用 Angular Material 设置 Google Material 图标的步骤
按照这 5 个步骤,我按照 Amit Shukla 指南在项目中使用 Material 图标。
在 index.html 的 head 元素中。
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
在实用程序文件夹中,我设置了一个自定义 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')); } }
将 svg 图标放入 asset 文件夹内的图标文件夹中
/app /assets /icons linkedin.svg
将 CustomMaterialModule 和 BrowserAnimationsModule 或 NoopAnimationsModule 添加到 app.module.ts 中的导入
import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations'; import { CustommaterialModule } from './utilities/custommaterial.module';
在你的 component.html 中
<mat-icon matTooltip="Write any pop up info" svgIcon="linkedin">LinkedIn </mat-icon>
关于javascript - Visual Studio 2013 中的 Angular Material 图标注册,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44630221/