My new font awesome (5.0) icon is not updating with ng-class

Question

With (fa) previous version (4), icon updated succesfully after a change in the app.layout.isSmallSidebar variable, but now (veriosn 5) it does not. It seems to have something to do with the way it is rendered...

Any ideas why? and how to solve this issue?

Thanks in advance!

You need to show more code for people to understand what you are talking about that is why they are down voting. — Aaron Rabinowitz, Dec 19 '17 at 18:50
I would suggest looking at the path for the font awesome maybe that has changed. — Aaron Rabinowitz, Dec 19 '17 at 18:52

score 1 · Answer 1 · answered Apr 07 '18 at 16:13

I've been searching for this same solution (I think) for a few days. In fact, no NG tags seem to apply to FA5 and I believe I've found why. According to FA5 install instructions, you are to include a js script in lieu of a stylesheet. The js script is changing all the new FA icons to SVG at runtime and thereby changing their reference on your dom. This makes your NG tag apply to something that no longer exists.

The solution to this is to include:

<link href="//use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">

instead of what I suspect you're using:

<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>

This is what georgeawg is using in his sample and that's why it works.

This was exactly the solution I needed and saved me many hours of digging. I had included both css and js and had the same issue. — md_rasler, Sep 09 '21 at 15:28

score 0 · Answer 2 · answered Dec 19 '17 at 22:29

Font Awesome 5 works with ng-class in:

This DEMO

    <link href="//use.fontawesome.com/releases/v5.0.1/css/all.css" rel="stylesheet">
    <script src="//unpkg.com/angular/angular.js"></script>
  <body ng-app>
    <fieldset>
     <i class="fa" ng-class="{'fa-times': selClose,
                              'fa-image': !selClose}">
       
     </i>
     Selectable icon
    </fieldset>
    <input type=checkbox ng-model="selClose">Select close icon
    <fieldset>
     <i class="fa fa-times"></i>
    </fieldset>
    <fieldset>
     <i class="fa fa-image"></i>
    </fieldset>
  </body>

My new font awesome (5.0) icon is not updating with ng-class

2 Answers2