September 18, 2025

Como usar iconos de FontAwesome en Angular

Angular

<u>Paquete:</u>

Descargamos los siguientes paquetes

$ npm install @fortawesome/free-solid-svg-icons

# See Compatibility table below to choose a correct version
$ npm install @fortawesome/angular-fontawesome@<version>

Importación de FontAwesomeModule en los Módulos

Tenemos que importar FontAwesomeModule en cada modulo en el que vayamos a usar los iconos

Registrar Iconos en un Servicio

Deberemos registrar cada icono que vayamos a usar antes de usarlo, por ello vamos a crear un servicio donde agruparemos todos los iconos que vayamos a usar:

import { Injectable } from '@angular/core';
import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { faCoffee, faUser, faPhone } from '@fortawesome/free-solid-svg-icons';

const icons = [faCoffee, faUser, faPhone]; // Aqui registraremos todos los iconos

@Injectable({
  providedIn: 'root'
})
export class FontAwesomeIconsService {
  constructor(library: FaIconLibrary) {
    library.addIcons(...icons);
  }
}

Registramos el Servicion en App.Component:

import { Component } from '@angular/core';
import { FontAwesomeIconsService } from './path/to/fontawesome-icons.service'; // <-- Import your service

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  constructor(private fontAwesomeIconsService: FontAwesomeIconsService) { // <-- Inject service to force instantiation
  }
}

📌

Podríamos ahorrarnos el paso del servicio y hacerlo en app.component para que sea más directo, pero he preferido hacerlo así por separación de responsabilidades.

Como usarlo en el HTML

<div class="voice-container">
  <h1>Buzón de voz</h1>
  <p>Llamando...</p>
  <fa-icon [icon]="['fas', 'coffee']"></fa-icon> <!-- Lo usamos aquí -->
</div>

Escrito por Pol Valle

Me interesa especialmente desarrollar aplicaciones que no solo sean funcionales, sino también atractivas y fáciles de usar. Lo consigo aplicando principios SOLID, arquitectura limpia y testing para garantizar la calidad.

Registrar Iconos en un Servicio

Deberemos registrar cada icono que vayamos a usar antes de usarlo, por ello vamos a crear un servicio donde agruparemos todos los iconos que vayamos a usar:

import { Injectable } from '@angular/core';
import { FaIconLibrary } from '@fortawesome/angular-fontawesome';
import { faCoffee, faUser, faPhone } from '@fortawesome/free-solid-svg-icons';

const icons = [faCoffee, faUser, faPhone]; // Aqui registraremos todos los iconos

@Injectable({
  providedIn: 'root'
})
export class FontAwesomeIconsService {
  constructor(library: FaIconLibrary) {
    library.addIcons(...icons);
  }
}

Registramos el Servicion en App.Component:

import { Component } from '@angular/core';
import { FontAwesomeIconsService } from './path/to/fontawesome-icons.service'; // <-- Import your service

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  constructor(private fontAwesomeIconsService: FontAwesomeIconsService) { // <-- Inject service to force instantiation
  }
}

📌

Podríamos ahorrarnos el paso del servicio y hacerlo en app.component para que sea más directo, pero he preferido hacerlo así por separación de responsabilidades.