Angular Font Awesome Icons not Rendering (tried other suggestions on site)

Question

I am attempting to add a delete icon to my Angular task list project. I have used ng add @fortawesome/angular-fontawesome. I then used npm install later when troubleshooting. I followed the guidance on one of the other threads and I cleared my cache and restarted the server. I have checked my code numerous times and cannot figure out the issue. I have no error messages. My page loads but no icon renders. Here is my code:

app.module.ts

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { FormsModule } from '@angular/forms'; // <-- NgModel lives here
    
    import { AppRoutingModule } from './app-routing.module';
    import { AppComponent } from './app.component';
    import { TaskComponent } from './task/task.component';
    import { TasksComponent } from './tasks/tasks.component';
    import { TaskDetailComponent } from './task-detail/task-detail.component';
    import { DatesComponent } from './dates/dates.component';
    import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
    import { ButtonComponent } from './components/button/button.component';
    
    @NgModule({
      declarations: [
        AppComponent,
        TaskComponent,
        TasksComponent,
        TaskDetailComponent,
        DatesComponent,
        ButtonComponent
      ],
      imports: [
        BrowserModule,
        FormsModule,
        AppRoutingModule,
        FontAwesomeModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }`
    ````
    **app.component,html**
    ````
    <div class="content">
    <!--task section-->    
    <h1>{{ title }}</h1> 
    <!--stack overflow method-->
    <img src="/assets/images/victorian.jpg" alt="victorian house" width="450"     height="300">
    <app-tasks></app-tasks>
    
    <!-- icon assoc. with font awesome install-->
    <fa-icon [icon]="faTimes"></fa-icon>
    
    <!--due date section-->   
    <app-dates></app-dates>
    
    </div>

task-detail.component.ts

    import { Component, OnInit, Input } from '@angular/core';
    import { Task } from '../task';
    import { faTimes } from '@fortawesome/free-solid-svg-icons';
    
    @Component({
      selector: 'app-task-detail',
      templateUrl: './task-detail.component.html',
      styleUrls: ['./task-detail.component.css']
    })
    export class TaskDetailComponent implements OnInit {
      @Input() task?: Task;
      faTimes = faTimes;
    
      constructor() { }
    
      ngOnInit(): void {
      }
    
    }

task-detail.component.html

 

   <div class="flex-container">
            <div *ngIf="task">
   
       <h2>{{task.name | uppercase}} Details </h2>
       <div><span>id: </span>{{task.id}}  <fa-icon [icon]= "faTimes"></fa-icon></div>
       <div>
         <label for="task-name">Task name: </label>
         <input id="task-name" [(ngModel)]="task.name" placeholder="name">
       </div>
   
       </div>

Thanks so much!!

Answer 1

Check the Fontawesome compatibility table and install specific version.

Compatibility table URLs -

1. https://www.npmjs.com/package/@fortawesome/angular-fontawesome
2. https://github.com/FortAwesome/angular-fontawesome

Run command -

npm install @fortawesome/angular-fontawesome@<version>

For example, my angular project version is 13. So I have used this fontawesome version npm install @fortawesome/[email protected]