search

FortAwesome / angular-fontawesome

Official Angular component for Font Awesome 5+
https://fontawesome.com
MIT License
1.49k stars 152 forks source link

Icons not being loaded when defining them via variable #233

Closed abid1208 closed 4 years ago

abid1208 commented 4 years ago

I am using Angular 5.2.0 with FontAwesome 0.1.1

When using the icons in HTML file and hardcoding the icon to be used everything works fine and the icons are being shown so for example when I use: <fa-icon [icon]="faChair"></fa-icon> the chair icon is being displayed.

What is required is that the icon name to be fetched from a variable. So I have a variable icon in my component icon = { id: 1, icon: 'faChair' }

I want the icon name to be fetched from this variable like this in HTML <fa-icon [icon]="icon.icon"></fa-icon> When I try to do the above, no icon is shown and the error in the console is "FontAwesome: Could not find icon with iconName=faChair and prefix=fas"

I want to know how to display icons when iconName is fetched through variables

devoto13 commented 4 years ago

You need to register all needed icons in the library to be able to use them by name. Please check documentation for the release you use on how to do it.

abid1208 commented 4 years ago

You need to register all needed icons in the library to be able to use them by name. Please check documentation for the release you use on how to do it.

I registered the icon in the library as mentioned in the docs. Still receiving the same error on console

devoto13 commented 4 years ago

@abid1208 Try setting icon property to “chair” instead of “faChair”.

abid1208 commented 4 years ago

@abid1208 Try setting icon property to “chair” instead of “faChair”.

Yes, this solved the issue. Thanks alot, Cheers!