Blazorise: Fontawesome icons?

[aford22]

Hello.

I see you have a Fontawesome package as part of your distribution. How are we meant to use this?

What I am looking to do is use FA icons as buttons. Do you provide an IconButton component or similar?

[stsrki]

There is an <Icon> component and it should be used by setting the Name attribute. There are two ways to do it:

1. Setting it with the predefined enum

<SimpleButton>
    <Icon Name="IconName.Save" /> Save
</SimpleButton>

This should be the preferred way to set the icon name. The biggest issue currently is that there is only a small number of icons defined. I'm planning to expand this in the future. see #36

2. Setting it manually with the icon classname

<SimpleButton>
    <Icon Name="@("fa-save")" /> Save
</SimpleButton>

This should be used only as the fallback in case there is no predefined icon name in the base enum.
PS. It seems there is a bug in current version of Blazorise so this example will not work.

[kamilkosek]

For anyone else jumping into this issue: I´ve creted a list with static strings containing the corresponding classes from the FontAwesome Free collection, see this Gist
And then in code :
<Button> <Icon Name="@(FontAwesomeIcons.AppleAlt)" /> Save </Button>
This way you have IntelliSense and can look up the icons from the cheatsheet: https://fontawesome.com/cheatsheet/free/solid

[WillianGruber]

Hello @kamilkosek ,
After #347 we need to add fas as a prefix for all icons.
Also, I'll update the class to include the other FA icon types, if you wish I can share them so you can update your collection.

[WillianGruber]

@kamilkosek , I remade the list and found that yours have some icons I couldn't find. (Do they really exist?) They are as follows:

• Buysellads
• Cssf13c
• DiceD2f6cf
• DiceDf6d1
• Htmlf13b
• Nsf3d5
• Pagef3d7
• Typof42b

I removed them from my class.

Here is my version of the named free icons including Regular and Brand Icons:
https://gist.github.com/WillianGruber/ba084bf332d00ed3462ddd0639c39c78
You can copy them if you wish.

[stsrki]

Guys, maybe I can include classes from @kamilkosek into Blazorise.Icons.FontAwesome? That way I could also handle fas, fab prefix.

[WillianGruber]

@stsrki feel free to use my version if you wish.
https://gist.github.com/WillianGruber/ba084bf332d00ed3462ddd0639c39c78
The rules to generate the friendly name are:
1) Replace "-" with " "
2) Convert 1st characters of words to uppercase
3) Concatenate the words
4) If the name starts with a number, use the "_" prefix

Check this file with the rules:
FontAwesomeIcons.xlsx

Also, the "Equal" icon generates a warning if you dont use the "new" keyword to overwrite the property. It is the only one with a different signature.

EDIT:
The Regular icons are a subset of the solid icons. So, I used the suffix "Regular" in their names. See the "Square" icon for both solid and regular.

[stsrki]

Wow @WillianGruber, excellent work with excel spreadsheet. I will include your version.

[stsrki]

On a side-note. I wanted to combine FontAwesome and Material icons side-by-side in excel file to match the similar icons under the same name. As you all know in current version there is not that many icon names in Blazorise. With all other work I just cannot find time to do it properly.

@WillianGruber, @kamilkosek any of you want to help?

[WillianGruber]

As material has fewer icons than fontawesome, its easier to match material to the FA.
Also, material uses subjetive meaning to name the icons, while FA uses objetive meaning.
Check for "menu" icon in material. The equivalent to FA is "bars" I think. We should choose and stick to one. I prefer FA.
I'll try to find some time to match these icons this weekend, but can't garantee, it's gonna be a busy one.

[stsrki]

Yeah I know. The naming differences was driving me crazy. I think the FA naming is just fine, as long as they represent the same thing.

If you could do it over the weekend, great. I'm starting with pretty packed v0.8.8. Its going to be a fun ride 😄

[WillianGruber]

I have started to make the spreadsheet, but it will take some time.

[stsrki]

@WillianGruber I'm really glad to hear that. I hope it will not give you too much trouble.

[WillianGruber]

@stsrki I got some time today, and I completed the comparison.
Here you go:

Material x FontAwesome Icons.xlsx

Can you reopen this issue until the new icons are included?

[stsrki]

@WillianGruber I cannot thank you enough for your work :)

There's actually a ticket for expanding the icons so I thinks this should be there.

36

[kamilkosek]

@kamilkosek , I remade the list and found that yours have some icons I couldn't find. (Do they really exist?) They are as follows:

• Buysellads
• Cssf13c
• DiceD2f6cf
• DiceDf6d1
• Htmlf13b
• Nsf3d5
• Pagef3d7
• Typof42b

I removed them from my class.

Here is my version of the named free icons including Regular and Brand Icons:
https://gist.github.com/WillianGruber/ba084bf332d00ed3462ddd0639c39c78
You can copy them if you wish.

Hi @WillianGruber , I´ve created the class automatically with a PowerShell script which scraped the website. Maybe something went there wrong 🤷‍♂️ I didn´t really tested all Icons ;)
Thanks for your work