Font-awesome: angular ng-if on I tag does not work

[cadilhac]

Hi,

I have an angular ng-if directive on a I tag. When it is converted to svg, I can still see it in the DOM on the svg tag (it has been copied) but it doesn't work anymore (not compiled?).
Thanks.

[knightcode]

This also seems to be an issue with ngClass, which I've previously been using to dynamically swap between icons like left and right chevrons, up and down arrows. SVGs are just a no-go then? ...saves clock cycles.

[cadilhac]

A simple workaround for me is to put the ng-directives on a wrapper element. But this would be better if it could work as is without thinking about it...

[robmadole]

Hey @cadilhac

We have an Angular component that we'd love for you to try out:

https://github.com/FortAwesome/angular-fontawesome

[cadilhac]

hummm, I'm using angular 1.x and I would need a js file... Maybe not ready for that yet?

[poddarkhushbu07]

Any solution to this problem? I am using fontawesome with angular v9

[tagliala]

@poddarkhushbu07 does https://github.com/FortAwesome/angular-fontawesome help?

[poddarkhushbu07]

@tagliala yes this will work but for that I need to include _FontAwesomeModule_ in my project and cannot use icons with _i tag of html_. Is there any way to accomplish this with _i tag_. I found a workaround by using ngIf on parent tag of _i tag_

[tagliala]

@poddarkhushbu07 are you using CSS implementation or SVG implementation?

[poddarkhushbu07]

@poddarkhushbu07 are you using CSS implementation or SVG implementation?

@tagliala SVG Implementation

[tagliala]

@poddarkhushbu07 have you tried with autoReplaceSvg set to false?

If it still doesn't work, docs mention that you should use the angular module or use the css implementation

Ref:

• https://fontawesome.com/how-to-use/javascript-api/setup/configuration#autoreplacesvg
• https://fontawesome.com/how-to-use/javascript-api/setup/configuration
• https://fontawesome.com/how-to-use/on-the-web/using-with/angular