How to use class binding with font-awesome icon?

Question

I'm trying to display two different icons based on the value of a variable. I want to show up arrow if it's true or down arrow if it's false. But it seems like it's not working at all and I can't figure out why. Here's the code-

<div class="custom-class" (click)="changeValue()">
<i class="fa fa-lg " [ngClass]="isValue ? 'fa-chevron-circle-up' : 'fa-chevron-circle-down'"></i>
</div>

My component class has something like this-

private isValue: boolean = true;
changeValue() {
    this.isValue = !this.isValue;
  }

I don't know why it doesn't work properly. I'm using font-awesome v6 and angular 14. Can anyone help me with this?

What does "doesn't work properly" mean? Are the classes being applied to the document? — isherwood, Aug 29 '22 at 16:21
Does this answer your question? [Angular: conditional class with \*ngClass](https://stackoverflow.com/questions/35269179/angular-conditional-class-with-ngclass) — Michael Ziluck, Aug 29 '22 at 16:41
@isherwood no the classes are not being applied to the component after the click. Yeah I tried using fa-solid as well but still doesn't work. — 474gaurav, Aug 30 '22 at 07:55

score 1 · Answer 1 · answered Aug 29 '22 at 16:40

1

Think you're using [ngClass] a bit wrong. Here are the different ways you can do exactly that:

Using [ngClass]:

<i class="fa fa-lg "
   [ngClass]="{ 'fa-chevron-circle-up': isValue, 'fa-chevron-circle-down': !isValue }"
></i>

Using [class.*] binding (my favorite):

<i class="fa fa-lg "
   [class.fa-chevron-circle-up]="isValue"
   [class.fa-chevron-circle-down]="!isValue"
></i>

More docs on class binding can be found here: https://angular.io/guide/class-binding

answered Aug 29 '22 at 16:40

Michael Ziluck

599
6
19

Thanks for answering! I tried these but it's still not changing the classes. Can it be due to new fontawesome version update? Cause I moved from 4 to 6 and earlier the same code was working. – 474gaurav Aug 30 '22 at 07:54
Guess you have two problems then! The classes have changed names since then: https://fontawesome.com/icons/circle-chevron-up?s=regular. The new name for that one is `fa-circle-chevron-up`. If that doesn't fix it, look at the page and inspect element. Check if that element has the classes. If it does have the classes but nothing shows up, it's a CSS issue. If it does not have the classes at all, it's an Angular issue. – Michael Ziluck Aug 30 '22 at 15:13

474gaurav · Accepted Answer · 2022-08-30T18:17:22.107

0

I switched to angular-fontawesome and it seems to be working with that. ngClass does not work with @fortawesome/fontawesome-free@5.9.0 correctly because the <i> dom is replaced with an <svg> dom. Here's the link to the github issue.

edited Aug 30 '22 at 18:17

answered Aug 30 '22 at 10:47

474gaurav

89
6

Thanks. You should include the relevant information from the issue here in your answer. – isherwood Aug 30 '22 at 12:36

How to use class binding with font-awesome icon?

2 Answers2