Início / coding / Perguntas / 79584729
Accepted
Carlos Henrique Reis
Asked: 2025-04-21 21:35:35 +0800 CST

Como usar ícones do FontAwesome com componentes autônomos do Angular Material 19?

  • 772

Estou trabalhando em um projeto Angular 19 usando componentes independentes e o Angular Material .
Quero usar ícones FontAwesome ( @fortawesome/angular-fontawesome) junto com componentes do Angular Material, como mat-icon, mas não tenho certeza sobre a maneira correta de integrá-los.

Aqui está o que fiz até agora:

/// <reference types="@angular/localize" />

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';
import { FaIconLibrary } from '@fortawesome/angular-fontawesome';

Eu instalei os pacotes necessários:

npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/angular-fontawesome

No entanto, não tenho certeza:

  • Como registrar corretamente os ícones FaIconLibraryem uma configuração autônoma .
  • Como usar os <fa-icon>componentes internos do Angular Material, como mat-list, mat-toolbar, etc.
  • Se há uma maneira limpa de usar os ícones do FontAwesome oumat-icon se <fa-icon>eles devem ser usados ​​separadamente.

Qualquer exemplo ou prática recomendada seria apreciada!

angular

1 respostas

  1. Best Answer

    Usando o Font Awesome sem @fortawesome/angular-fontawesome):

    Segui o tutorial abaixo e funcionou muito bem.

    Registre ícones fontawesome para uso com o material MatIcon

    Instale o pacote:

    npm i font-awesome --save

    Adicione os estilos a angular.json:

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

    Adicione alguns estilos para tornar a fonte consistente no global-styles.scssarquivo.

    .mat-icon.fa {
  font-size: 20px;
}

    Então precisamos adicioná-lo MatIconRegistryao providersarray de bootstrapApplication, para que possamos configurá-lo dentro do nosso componente raiz.

    import { MatIconRegistry } from '@angular/material/icon';
...

bootstrapApplication(IconOverviewExample, {
  providers: [
    ...
    MatIconRegistry,
  ],
}).catch((err) => console.error(err));

    Em seguida, importe MatIconRegistrye configure o componente raiz para Font Awesome.

    import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
...
@Component({
  selector: 'icon-overview-example',
  templateUrl: 'icon-overview-example.html',
  imports: [MatIconModule],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class IconOverviewExample {
  public matIconRegistry: MatIconRegistry = inject(MatIconRegistry);
  constructor() {
    this.matIconRegistry.registerFontClassAlias('fontawesome', 'fa');
  }
}

    Então podemos usá-los no HTML, fornecendo fontSete fontIcon:

    <mat-icon
aria-hidden="false"
aria-label="Example home icon"
fontIcon="home"
></mat-icon>
<mat-icon fontSet="fa" fontIcon="fa-shopping-bag"></mat-icon>

    Demonstração do Stackblitz

    • 1

relate perguntas