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

Registramos el Servicion en App.Component:

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

@

📌

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]=

Written by Pol Valle

I am particularly drawn to developing applications that are not only functional but also visually appealing and easy to use. I accomplish this by implementing SOLID principles and clean architecture, and applying testing to ensure quality.