Angular Not Display Font Awesome Icons

I've installed font awesome and added the FontAwesomeModule to the imports for app.module.ts. I'm trying to add an icon to a component within this module and it still says that "fa-icon" is not a known element:

"'fa-icon' is not a known element:

1. If 'fa-icon' is an Angular component, then verify that it is part of this module.
2. If 'fa-icon' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message."

All of the answers I see out there are because the FontAwesomeModule isn't added to the imports of the module containing the component and icon. This isn't the case and I'm looking for the reason why it is still not recognized.

courses.component.html:

<div class="course">
 <h3>{{ course.title }}</h3>
 <fa-icon icon="{{ faCoffee }}"></fa-icon>
 <p>Students: {{ course.students | number }}</p>
 <p>Rating: {{ course.rating | number: ".2-2" }}</p>
 <p>Price: {{ course.price | currency: "USD":true:".2-2" }}</p>
 <p>Release Date: {{ course.releaseDate | date: "shortDate" }}</p>
 <p>Description: <span class="desc">{{ course.description | summary }}</span></p>
 <button (click)="fullDesc()" class="btn btn-primary">Learn More</button>
</div>

courses.component.ts:

import { CoursesService } from './../courses.service';
import { Component, OnInit } from '@angular/core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-courses',
  templateUrl: './courses.component.html',
  styleUrls: ['./courses.component.css']
})
export class CoursesComponent implements OnInit {
  faCoffee = faCoffee;
  course = {
  title: "The Complete Music Course",
  rating: 4.434,
  students: 32354,
  price: 132.99,
  releaseDate: new Date(2016, 4, 1),
  description: "The Music Theory course is designed to enhance music skills and basic music fundamentals. Throughout the course of the year students will study basic notation, scales, key signatures, intervals, triads, cadences, non-chord tones, form, part-writing and analysis of a score."
}

app.module.ts:

import { SummaryPipe } from './summary.pipe';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { CoursesComponent } from './courses/courses.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

@NgModule({
declarations: [
  AppComponent,
  CoursesComponent,
  SummaryPipe
],
imports: [
  BrowserModule,
  AppRoutingModule,
  FormsModule,
  FontAwesomeModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {
}