Using Material icon and font awesome

[Kea_JuKu]

Hello! trying to add icons to my project with either Google material icon or Font awesome.
Here is my story, while using the Material icon, I can’t find a way around adding a round icon to my project since the code name of the icon for example ‘home’ for a filled once and still ‘home’ for the round icon. the only difference is in their CSS code but Kodular only supports HTLM anyways. So I’m going for Font Awesome because they provided HTLM code, and what I have done was to download Font Awesome web TTF, upload it to the project, and enable HTML for the label as the screenshot below:

but it’s not working! please help if I’m doing it wrong, Thanks!

[dora_paz (Dora)]

In order to use font awesome you have to use the following format &#xYour_Code; so put as text  and try again

[dora_paz (Dora)]

For material icons you have to use format_align_left

[Kea_JuKu]

Wow! it’s working. Thank you.
But when I change to a regular font, the icon didn’t change. It’s still the same solid one.

I used this apple icon as an example.

[Kea_JuKu]

Thank you for showing me the way to do it! The problem I have with material icons is that I can’t use a round icon, it always shows the sharp icon. do we have a way to make it appear a round rather than a sharp icon?

[dora_paz (Dora)]

Use a button shape oval, height=width

Result

[Kea_JuKu]

What I mean is the icon has different shapes (Font Awesome) and I sometimes want to use a solid shape icon and sometimes I prefer a regular shape icon. But I don’t know how to do that!

And the same thing for Material icon, they have different shapes of icon too, but I’m struggle how to use a round shape icon.


My apology if I make things hard to understand!

[Still-learning (1-2-3-4...)]

Then in blocks page add
Set this button or label font to xxxx and text to xxxx

[dora_paz (Dora)]

Either use as shown above

or download image and use as background

[Kea_JuKu]

Thank you @dora_paz and @Still-learning!

I have tried testing the Font Awesome’s font for about 10 icons now, and I seem to get it!
They provided 3 TTF font

• fa-solid-900.ttf
• fa-regular-400.ttf
• fa-brands-400.ttf
  the ‘regular’ and ‘brands’ font have only 400 icons while ‘solid’ font have over 900 icons. As an example the ‘apple’ icon didn’t appear when I use either ‘fa-brands-400.ttf’ or ‘fa-regular-400.ttf’ except ‘fa-solid-900.ttf’. I guess, I will download the png and use it!

[dora_paz (Dora)]

No need to set it from blocks. Set it in Designer’s properties