CODEWITHSUNDEEP
angularfont-awesomeangular-fontawesome
Brandon Steele
Brandon Steele

Reputation: 23

Font Awesome class mapped to angular import definitions

https://fontawesome.com/icons/

When searching for an icon it gives you the class to enter into the HTML, but angular requires to use the icondefinitions.

for example:

<i class="fa-solid fa-star"></i>

Would be the following with angular:

<fa-icon [icon]="['fas','star']"></fa-icon>

How do I figure out the icondefinition for the icons I find in the website?

I have found the list of definitions in the project, but it doesn't really help mapping it to the icon on the site.

List of icondefinitions

Upvotes: 0

Views: 482

Answers (1)

Brandon Steele
Brandon Steele

Reputation: 23

I was able to get it to work using the class directly "fa-solid fa-diamond".

I was pulling this from an data array and pulled it in via a variable like this:

<a class="{{data.icon}}"></a>

    {
        routeLink: '/tabletopcreator/dashboard',
        icon: "fa-solid fa-diamond",
        label: 'Tabletop Creator',
    }

This worked because i added this to the index.html

<script src="https://kit.fontawesome.com/98f07d8644.js" crossorigin="anonymous"></script>

Upvotes: 0

Related Questions