Как правильно зарегистрировать шрифт-awesome для md-icon?

Документация md-icon описывает, как использовать шрифт-awesome в нескольких частях и предлагает нам использовать шрифт-awesome в конце концов, как

<md-icon fontSet="fa" fontIcon="alarm"></md-icon>

Но документация очень сбивает с толку, и я едва ли могу найти рутину для регистрации третьего шрифта, установленного как шрифт-awesome для md-icon через Google.

Любая помощь приветствуется!

PS: Я знаю, что обычный <i> способ вообще работает, но он не работает в некоторых примерах, где первоначально используется md-значок.

Ответ 1

Добавьте шрифт awesome cdn в файл Index.html:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

Затем попробуйте поставить этот код, он работает для меня:

<md-icon class="fa fa-clock-o" aria-hidden="true"></md-icon>
<md-icon class="fa fa-bell" aria-hidden="true"></md-icon>

Ответ 2

В AppModule добавьте:

import { MatIconModule, MatIconRegistry } from '@angular/material';

Затем добавьте MatIconModule к вашим импортам, например:

imports: [...
   MatIconModule
...]

Добавьте MatIconRegistry своим провайдерам:

providers: [...
    MatIconRegistry
....]

Затем добавьте в класс AppModule следующее:

export class AppModule {
    constructor(
        ...public matIconRegistry: MatIconRegistry) {
        matIconRegistry.registerFontClassAlias('fontawesome', 'fa');
    }

Затем вы можете использовать в любом месте своего проекта так:

<mat-icon fontSet="fa" fontIcon="fa-times-circle"></mat-icon>

Обновить

В каком-то проекте вам нужно включить в свой проект "font-size". Я использую angular-cli, добавляя шрифт-awesome пакет npm:

npm install font-awesome --save

и включив его в список стилей в файле angular-cli.json, работает для меня:

"styles": [
    ...
    "../node_modules/font-awesome/scss/font-awesome.scss",
  ],

Обновление 2

Изменены префиксы на "Мат", чтобы отразить последние обновления углового материала.

Ответ 3

Я настроил https://github.com/FortAwesome/angular-fontawesome#using-the-icon-library

То, как я тогда использую это:

<mat-form-field>
    <input matInput style="width: calc(100% - 20px);/>
    <fa-icon [icon]="['fal', 'home']" size="lg" class="fa-pull-right"></fa-icon>                  
</mat-form-field>

Ответ 4

Добавьте шрифт awesome на страницу index.html:

<link href="#" onclick="location.href='https://fonts.googleapis.com/icon?family=Material+Icons'; return false;" rel="stylesheet">

Добавьте MatIconModule в свой AppModule:

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

@NgModule({
  declarations: [],
  imports: [
    MatIconModule
  ]...

Наконец, добавьте значок в свой app.component.html:

  <mat-icon>menu</mat-icon>