Как я могу использовать иконки MDI в угловой 6 - PullRequest
Новая
       11

Как я могу использовать иконки MDI в угловой 6

0 голосов
/ 23 марта 2019

Я пытаюсь настроить mdi иконки с @ angular / material в моем мини-проекте. Я пробовал несколько учебных пособий, но безрезультатно.

При регистрации набора значков в соответствии с руководством (как показано ниже) я получаю некоторые ошибки ... 

constructor(matIconRegistry: MatIconRegistry, domSanitizer: DomSanitizer) { 
  matIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityTrustResourceUrl('./assets/mdi.svg'));
}

Вот мой код ...

app.module.ts 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { MatIconRegistry, MatToolbarModule, MatIconModule } from '@angular/material';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
declarations: [
  AppComponent
],
imports: [
  BrowserModule,
  AppRoutingModule,
  FormsModule,
  HttpModule,
  MatToolbarModule,
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

styles.scss 

@import "~@angular/material/prebuilt-themes/indigo-pink.css";
@import url(https://fonts.googleapis.com/icon?family=Roboto);

$BasicColor: #76b3c8;
body {
  #basic {
    background-color: $BasicColor;
  }
}

index.html 

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>PruebaAngular</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

app.component.html 

<mat-toolbar id="basic">
  <span>Home</span>
</mat-toolbar>

<router-outlet></router-outlet>

angular.json 

...
"architect": {
  "build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
      ...
      "assets": [
        "src/favicon.ico",
        "src/assets",
        { "glob": "**/*", "input": "./assets/", "output": "./assets/" },
        { "glob": "favicon.ico", "input": "./", "output": "./" },
        { "glob": "mdi.svg", "input": "../node_modules/@mdi/angular-material", "output": "./assets" }
      ],
    }
  },
}
...

Ответы [ 2 ]

0 голосов
/ 23 марта 2019

Самый простой способ использовать иконки материалов в угловом формате - это mat-icon компонент 

<mat-icon>home</mat-icon>

https://material.angular.io/components/icon/overview

0 голосов
/ 23 марта 2019

Рабочий пример https://stackblitz.com/edit/angular-material-mdi

? Установить пакет NPM

Используйте следующую команду для установки пакета npm для @ mdi / angular-material 

npm install @mdi/angular-material --save

? Включить mdi.svg в список скомпилированных активов

Добавьте node_modules/@mdi/angular-material/mdi.svg в список assets в файле angular.json, используя синтаксис glob 

"assets": [
  "src/favicon.ico",
  "src/assets",
  { "glob": "mdi.svg", "input": "node_modules/@mdi/angular-material/", "output": "./assets" }
],

Проверка правильности копирования mdi.svg в папку assets

Чтобы проверить, правильно ли скопирован mdi.svg файл в папку assets, запустите ng build и просмотрите созданную папку dist/assets, чтобы увидеть, присутствует ли mdi.svg. Если нет, вам, возможно, придется скорректировать входной путь glob относительно его корня в рабочей области. См. документация по ресурсам проекта для получения подробной информации о том, как включить активы через файл angular.json.

? Зарегистрировать значок SVG, установленный на @ angular / material icon registry

Зарегистрируйте набор иконок svg с помощью matIconRegistry в конструкторе вашего AppModule

import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgModule } from '@angular/core';
import { MatIconRegistry, MatIconModule } from '@angular/material';
import { DomSanitizer } from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    MatIconModule, // you have to import MatIconModule into your app
  ]
})
export class AppModule {
  constructor(matIconRegistry: MatIconRegistry, domSanitizer: DomSanitizer){
    matIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityTrustResourceUrl('./assets/mdi.svg'));
  }
}

? Использование

Вы сможете использовать компонент mat-icon, указав нужную иконку с svgIcon свойство 

<!-- Icon by itself -->
<mat-icon svgIcon="android"></mat-icon>

<!-- Icon button -->
<button mat-icon-button>
  <mat-icon svgIcon="android"></mat-icon>
</button>

<!-- You can also combine an icon and text together -->
<button mat-button>
  <mat-icon svgIcon="code-tags"></mat-icon>
  <span>View source</span>
</button>

? Настройки CSS для @ angular / material

Также говорят, что добавьте это в ваш глобальный CSS-файл styles.css, чтобы решить некоторые проблемы с выравниванием с помощью @ angular / material 

button.mat-menu-item {
  line-height: 24px !important;
}

a.mat-menu-item > mat-icon {
  margin-bottom: 14px;
}

.mat-icon svg {
  height: 24px;
  width: 24px;
}

❓ Все еще есть ошибки

Как подсказка, если у вас по-прежнему возникает ошибка во время выполнения, поскольку приложение не может извлечь файл mdi.svg, хотя он присутствует в папке dist/assets при использовании ng build, это, вероятно, означает, что что-то блокировка / перехват HTTP-запроса.

Угловое-в-памяти-апи

Например, при использовании angular-in-memory-api вам необходимо установить свойство passThruUnknownUrl: true при импорте HttpClientInMemoryWebApiModule (см. исправленная проблема ), поскольку это позволяет URL-адресу набора значков проходить без перехвата. .

Серверное-Rendering

Для SSR может потребоваться указать полный URL-адрес при регистрации набора значков (см. связанная проблема ), чтобы mdi.svg файл был выбран правильно.

? Официальная документация @mdi

Вы можете обратиться к официальной @mdi документации , если есть что-либо.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...