Feature request: the ability to dynamically bind Font Awesome icons based on keys retrieved from GraphQL data

monacodelisa commented 9 months ago

Describe the problem you'd like to see solved or task you'd like to see made easier

In my open source project I am working with GraphGL data response and I want to map the icons to the response I get. The response object is a key value pair, so I am already using the keyvalue pipe in Angular. The key is the name of the social media platform and the value is the link to it. I would like to dynamically map brand icons like - github, linkedin etc. to the matching response key.

Is this in relation to an existing part of angular-fontawesome or something new?

This is related to the new syntax <fa-icon [icon]="faCoffee"></fa-icon> which apparently allows me to only bind to a IconProp object directly through the template and nothing else.

What is 1 thing that we can do when building this feature that will guarantee that it is awesome?

Why would other angular-fontawesome users care about this?

Because it was some functionality that I was able to achieve with the previous syntax by doing the following:

 @for (social of blogSocialLinks | keyvalue; track social) {
          @if (social.value && social.key !== 'website') {
          <a href="{{social.value}}" target="_blank" rel="noopener noreferrer">
            <i class="fa-brands fa-{{social.key}}"></i>
          </a>
          }
        }

On a scale of 1 (sometime in the future) to 10 (absolutely right now), how soon would you recommend we make this feature?

Totally up to you I will be continuing my research I may find some solution

Feature request checklist

[x] This is a single feature (i.e. not a re-write of all of Font Awesome)
[x] The title starts with "Feature request: " and is followed by a clear feature name (Ex: Feature request: moar cowbell)
[x] I have searched for existing issues and to the best of my knowledge this is not a duplicate

devoto13 commented 9 months ago

With Icon Library approach you can do the same thing as you used to do - render fa-icon and specify the icon from the string.

You'll need to register all icons which can potentially be rendered in the library + you may need to use $any() depending on how your response is typed: <fa-icon [icon]="['fab', $any(social.key)]"></fa-icon>.

monacodelisa commented 9 months ago

With Icon Library approach you can do the same thing as you used to do - render fa-icon and specify the icon from the string.

You'll need to register all icons which can potentially be rendered in the library + you may need to use $any() depending on how your response is typed: <fa-icon [icon]="['fab', $any(social.key)]"></fa-icon>.

thank you I will give it a try

devoto13 commented 8 months ago

Hope you were able to resolve your problem by now. If you still experience the problem and believe that some functionality is missing, please provide more details and I'll be happy to re-open the issue.

FortAwesome / angular-fontawesome