Как использовать angular-fontawesome с Angular Material?

Question

Существующие вопросы по этому вопросу относятся к тому, как использовать Angular с FontAwesome Icons, и в идеале ответом будет Angular FontAwesome .Я искал оба репозитория и не нашел ничего особенного, используя angular-fontawesome.Есть только намеки на более старые решения.

Итак, у меня есть это.Я также использую кнопки Angular Material Buttons, для которых мне поручено использовать FontAwesome Icons в моих кнопках, и это приводит меня к Material Icons

Я не совсем уверен, с чего начать.

При условии, что я добавил Icon к angular-fontawesome, как описано.У меня есть кнопка с пиктограммой, готовая к работе, есть стандартный метод для соединения двух?

TLDR: я хочу использовать Material Icon Button, но я не могу использовать Material Iconи вместо этого придется использовать FontAwesome Icons.Я не знаю, как этого добиться.

Answer 1

Подход 1: Реестр значков материалов

Материал позволяет использовать пользовательских значков SVG с его компонентами (например, mat-button).Значки FontAwesome также являются SVG, поэтому вы можете использовать этот механизм для решения стоящей задачи.

// 1. Import desired FontAwesome icon
import { faFontAwesomeFlag } from '@fortawesome/free-brands-svg-icons';
import { icon } from '@fortawesome/fontawesome-svg-core';

// 4. Use with `mat-icon` component in your template
@Component({ template: '<button mat-button type="button"><mat-icon svgIcon="font-awesome" style="vertical-align: top"></mat-icon>Make Awesome!</button>' })
export class AppComponent {
  constructor(registry: MatIconRegistry, sanitizer: DomSanitizer) {
    // 2. Render icon into SVG string
    const svg = icon(faFontAwesomeFlag).html.join('');
    // 3. Register custom SVG icon in `MatIconRegistry`
    registry.addSvgIconLiteral(
      'font-awesome', 
      sanitizer.bypassSecurityTrustHtml(svg)
    );
  }
}

Также проверьте эту проблему для описания более легкой реализации.

Подход 2. Использование компонента fa-icon из библиотеки angular-fontawesome

Поскольку вы уже используете пакет @fortawesome/angular-fontawesome в своем приложении, вы можете вообще не использовать mat-icon и использовать fa-icon внутри mat-button вместо этого.

import { faFontAwesomeFlag } from '@fortawesome/free-brands-svg-icons';

@Component({ template: '<button mat-button type="button"><fa-icon [icon]="faFontAwesomeFlag" style="padding-right: 6px"></fa-icon>Make Awesome!</button>' })
export class AppComponent {
  faFontAwesomeFlag = faFontAwesomeFlag;
}

Обратите внимание, что вам также нужно добавить FontAwesomeModule к imports, чтобы это работало.См. документацию для получения более подробной информации.

---

Вот демонстрация с обоими описанными подходами: https://stackblitz.com/edit/components-issue-8znrc5

Обратите внимание, что мне также пришлось добавить немного CSS для обеспеченияэтот значок хорошо совпадает с текстом кнопки.

Answer 2

1. Перейдите в каталог вашего проекта и выполните эту команду, чтобы установить пакет значков Google Material

   npm add material-design-icons.

2. Далее обновитеФайл «.angular-cli.json» для включения веб-шрифта на страницу «index.html» при компиляции приложения:

   { styles: [ "./assets/fonts/material-icons/material-icons.css" ] }

3. Наконец,Вы можете проверить шрифт, обновив основной шаблон приложения следующим образом:

   <h1>Material Icons</h1> <i class="material-icons">account_circle</i> <i class="material-icons">thumb_up</i>

Вы можете обратиться к этому сайту ,Я следовал всем шагам этого сайта, чтобы использовать mat-icons, когда создавал проект angular 6.Подробнее

Вы также можете оформить заказ на stackblitz

---

Обновление Если вы хотите использовать шрифт потрясающие значки, я предлагаю вам начать с следующихэто гид .Это очень легко и просто в использовании.

Установите удивительную зависимость от шрифта с помощью команды npm install --save font-awesome angular-font-awesome. После этого импортируйте модуль:

import { AngularFontAwesomeModule } from 'angular-font-awesome';
@NgModule({
//...
imports: [
//...
AngularFontAwesomeModule
],
//...
})
export class AppModule { }