course-item.component.html

<div class="course-item {{status}}">
  <div class="course-row course-info">
    <div class="icon-number-wrapper">
        <p class="course-number">
            {{subject}} {{course.catalogNumber}}
        </p>
        <div [ngSwitch]="status">
            <i *ngSwitchCase="'complete'" class="material-icons complete-icon">check_circle</i>
            <i *ngSwitchCase="'in-progress'" class="material-icons in-progress-icon">check_circle</i>
            <i *ngSwitchCase="'waitlist'" class="material-icons problem-icon">report_problem</i>
            <i *ngSwitchCase="'incomplete'" class="material-icons error-icon">error</i>
            <i *ngSwitchCase="'favorite'" class="material-icons favorite-icon">favorite_border</i>
        </div>
    </div>
    <p class="course-credits">{{ course.credits !== undefined ? course.credits : "--" }} Cr</p>
  </div>

  <div class="course-row">
    <p class="course-title">{{course.title}}</p>
  </div>
</div>