Material design icons vs font awesome

[Trying_to_learn]

I don't get why the syntax is different to use them in/on buttons etc.

Font awesome icons are done this way:
(for instance)

msg.icon = '<font color = "black" i class="fa fa-book fa-2x"></i>';

Easy enough for me to understand.

But the Material design are different:
(again: for instance)

msg.icon = '<font color = "black" i class="material-icons md-48">check_circle_outline</i>';

In the FA example the part:
class="fa fa-book fa-2x

But MaterialDesign is:
class="material-icons md-48">check_circle_outline

The > is throwing me.

Could someone explain away my confusion?

[dceejay]

They are different fonts from two different providers who have implemented it differently.

[zenofmud]

@Trying_to_learn

The > is throwing me.

Possible because your HTML is missing a ><before the i - the line should be
msg.icon = '<font color = "black"><i class="material-icons md-48">check_circle_outline';

[Trying_to_learn]

@zenofmud

Possible because your HTML is missing a >< before the i

Thanks. I will try to work that out.

Both of them work, which also doesn't help me understand.

HTML being so picky I thought would spit the dummy and so not allow the second one.

[zenofmud]

@Trying_to_learn

I don't get why the syntax is different to use them in/on buttons etc.

Are you talking about the ui_button node or something else? If it is something else, please provide a link to where you got your information.

[Trying_to_learn]

The ui_button part.

I had a bit of a good run with writing some code for buttons and was stuck with the syntax of using the MD icons vs the FA icons.

Though dceejay said they are different providers who have implemented it differently that doesn't jell with me.

Stated that HTML wants a structure/syntax/(what ever) then I can't see how when I am sending a message to a button node, that the structure is different.

I have seen this difference also when using the icons ..... well: in text nodes. But I guess at the end of the day: they are the same anyway with how they handle their messages.

Again: Thanks.

[zenofmud]

For the ui_button node all you need do is put the icon name in the icon option

For font awesome use:

if you want it bigger you just add the sizing option like

For material design use:

and this is what you will see:

[Trying_to_learn]

Yeah, thanks.

But I a sending them in the message.

So in one instance it could be:

msg.icon = '<font color = "black" i class="material-icons md-48">check_circle_outline</i>';

and in another it could be:

msg = {icon: '<font color = "white" i class="fa fa-book fa-2x"></i>'};

I just got caught on the different way of .... declaring the icon in the message.

The button node has the label set to msg.icon.

[zenofmud]

go back and import the example in Examples of Colour change button and switch and see if you can spot your mistakes (note the plural)

[Trying_to_learn]

I shall have a look shortly.

Shame I didn't see those examples earlier.

But I hope mine are also well liked.

I've uploaded one of them to the "library".

[afelix]

@Trying_to_learn

The > is throwing me.

Could someone explain away my confusion?

Back to basics for a moment, do you have the basic understanding of how HTML works? It is a nested structure of tags, such as font, img, a, button, and so on. These tags are all responsible for a part of the page, or part of a structure. For example, a is the anchor tag, and it shows links, p is a paragraph and text inside it is formatted as such. All tags are surrounded by < and >. Meaning font becomes <font>, which becomes the starting tag. However, the HTML needs to know where this font ends, so an ending tag is required: </font>. In structured HTML, all tags need/should need (this discussion is for another topic I'd say) an ending tag. So everything between <font> and </font> becomes written in that font you set.

When a tag needs more information, for example a CSS class needs to be defined, it is done by adding attributes to the starting tag. An attribute is a key, followed by =, and then the value. Often that value is a string, which means it gets wrapped in quotes (""). To add a link to an <a> tag, you use the href attribute, that's the key: <a href="https://discourse.nodered.org/">this link goes to this site</a>. The text the link has, is contained in between the start and ending tag. That line becomes this: this link goes to this site

Say you have an image, and you want it to be clickable: what you would do is wrap a link around it. To do so you need to nest tags. Instead of wrapping just text inside the start and end tags, you wrap another tag in it: <a href="https://discourse.nodered.org/"><img alt="the alternative text to show if this image cannot load"></img></a>. How to actually add an image is beyond the scope of this quick summary.

Back to your problem. When you're working with icons on the dashboard, you're specifying HTML tags for the icon structure. Either using MaterialDesign, or FontAwesome. They come as a <font> tag, where a color attribute is specified, and inside a nested <i> tag which explains the icon that is used. They each use their own way of handling icons. For FontAwesome, you simply set a class attribute on the <i> with fa, followed by the icon you want to use, which for example is fa-book.
MaterialDesign on the other hands just sets a class attribute as material-icons, and the icon you want to use is nested inside as written text. Just like the text of the link as seen before.

This difference is a design choice between MaterialDesign and FontAwesome. Both frameworks decided to pick their own way of doing it, and as a result it is not the same.

@Trying_to_learn

HTML being so picky I thought would spit the dummy and so not allow the second one.

Now to ease your confusion a bit, take a look at attributes again. An attribute is usually written as key=value right? When an attribute is specified as just key without the equals sign or the value, the code simply assumes that you meant to say key=true.

I hope this helps your understanding a bit on what is happening, and why it doesn't fail as explicit as you would have hoped Any follow-up questions, just ask away.

[TotallyInformation]

@Trying_to_learn

I shall have a look shortly.

Shame I didn't see those examples earlier.

Just to chip in and hopefully I'm not creating a side-track. But in my experience, if you need to understand a particular library or framework, it is best to seek out some simpler examples and try those without all the noise that Node-RED's framework also adds.

But either way, the danger of something like Dashboard is that - although it gives loads of people the ability to get going really quickly and avoid the need to know much if any HTML, CSS, JavaScript and Angular - there comes a point where Dashboard can no longer hold your hand and suddenly you fall off an understanding cliff.

At that point, it is time to take stock, take a step back and think about what libraries/frameworks you actually need to use and to learn a little more about them before getting stuck down rabbit holes.

[zenofmud]

An even easier way to change the icon is to use ui_control.

For example, here is how you could use it to change the Button's icon using any of the three font styles

Each change node sets msg.ui_control:

Note: you can add other options to the object. See https://github.com/node-red/node-red-dashboard/blob/master/config-fields.md)

Flow of the ablve example:

[{"id":"11a56d6d.43391b","type":"tab","label":"Flow 5","disabled":false,"info":""},{"id":"a361a5ed.6d1ee8","type":"change","z":"11a56d6d.43391b","name":"Material design - book","rules":[{"t":"set","p":"ui_control","pt":"msg","to":"{\"icon\":\"book\"}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":400,"y":180,"wires":[["d202bb5c.9042b"]]},{"id":"635e4ee4.2bc768","type":"inject","z":"11a56d6d.43391b","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":180,"y":180,"wires":[["a361a5ed.6d1ee8"]]},{"id":"d202bb5c.9042b","type":"ui_button","z":"11a56d6d.43391b","name":"","group":"4a875617.84471","order":1,"width":0,"height":0,"passthru":true,"label":"","tooltip":"turn off alarm","color":"{{msg.colour}}","bgcolor":"{{msg.background}}","icon":"wi-wu-clear","payload":"button clicked","payloadType":"str","topic":"topic from button","x":590,"y":240,"wires":[["195778b5.d5fcf7"]]},{"id":"195778b5.d5fcf7","type":"debug","z":"11a56d6d.43391b","name":"after UI","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":740,"y":240,"wires":[]},{"id":"d50364fe.88d528","type":"inject","z":"11a56d6d.43391b","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":180,"y":240,"wires":[["1cd96231.7cd976"]]},{"id":"749bc785.e7de1","type":"inject","z":"11a56d6d.43391b","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":180,"y":300,"wires":[["3e431f08.f532c8"]]},{"id":"3e431f08.f532c8","type":"change","z":"11a56d6d.43391b","name":"Weather Icon - clear","rules":[{"t":"set","p":"ui_control","pt":"msg","to":"{\"icon\":\"wi-wu-clear\"}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":400,"y":300,"wires":[["d202bb5c.9042b"]]},{"id":"1cd96231.7cd976","type":"change","z":"11a56d6d.43391b","name":"Font Awesome - car","rules":[{"t":"set","p":"ui_control","pt":"msg","to":"{\"icon\":\"fa-car  fa-2x\"}","tot":"json"}],"action":"","property":"","from":"","to":"","reg":false,"x":400,"y":240,"wires":[["d202bb5c.9042b"]]},{"id":"e6f8294a.df3f98","type":"comment","z":"11a56d6d.43391b","name":"Examples using ui_control to change BUTTON icon ","info":"","x":310,"y":120,"wires":[]},{"id":"4a875617.84471","type":"ui_group","z":"","name":"button group","tab":"b91fc8ae.6397","order":1,"disp":true,"width":"6","collapse":false},{"id":"b91fc8ae.6397","type":"ui_tab","z":"","name":"button tab","icon":"dashboard","order":1,"disabled":false,"hidden":false}]

[Paul-Reed]

...and we haven't mentioned icon styling (modifiers) yet - sizing, rotating, colour...
See the available options in the readme for weather-icons-lite.

[Trying_to_learn]

Afelix:
To answer your initial question:

I know diddily about HTML. All I try to concern myself with is the structure.
If I know the rules and I obey them, all should work.

@TotallyInformation

there comes a point where Dashboard can no longer hold your hand and suddenly you fall off an understanding cliff.

That's me. There I admitted it.

(Alelix)
Thanks very very much for that reply.

I think I am starting to see the problem I have.

The tags.... < i > < font > etc...... and their closers: < /i > and < /font >

I thought (and I've been told about thinking before...) they were ....... what's the word?

`msg.icon = '<font color = "black" i class="material-icons md-48">check_circle_outline</i>';`

`msg = {icon: '<font color = "white" i class="fa fa-book fa-2x"></i>'};`

So the <font doesn't need the > there and then.
It can be split.
As per the first line - and second.

@afelix

So everything between <font> and </font> becomes written in that font you set

But that goes against the <font> ...... </font> part.

Then I move on to the i......

In both the i isn't preceeded with the correct format. Be it I am not wrong with the syntax of the two lines.

Putting that aside for a second, here's another bit if confusion:

@afelix

and inside a nested <i> tag which explains the icon that is used.

`msg.icon = '<font color = "black" i class="material-icons md-48">check_circle_outline</i>';`

I'm guessing that that lonely i between "black" i class should be <i> to match up with the one at the end.

And there's where it all falls down for me.

The <font> and <i> are inside each other. I didn't know that was legal.

I think I've shown enough of my confusion on this problem and I don't want to make the whole any bigger than it is just now.

Alas I've got another question to ask and need to get that done quickly and then I can look more at this.
I've copy/pasted all of your big reply for later (offline) looking.

[zenofmud]

go back and import the example in Examples of Colour change button and switch and see if you can spot your mistakes (note the plural)

1. msg.icon is wrong - go look at the example and see what it should be
2. your html is wrong - go look at the example and see what it should be

[knolleary]

@Trying_to_learn

So the <font doesn't need the > there and then.
It can be split.

No.

The following is not valid HTML at all.

<font color = "black" i class="material-icons md-48">check_circle_outline</i>

Some browsers may read that and try to guess what you meant, but it would be better to get the syntax right at the start. For example, leaving off the closing font tag may work, but you are leaving it up to the browser guess.

It is never valid to leave off the brackets as you have done between the font and i tags.

The following is the valid HTML version of the above.

<font color="black"><i class="material-icons md-48">check_circle_outline</i></font>

[Trying_to_learn]

@knolleary

Some browsers may read that and try to guess what you meant, but it would be better to get the syntax right at the start.

I fully agree. (Believe it or not.)

I know I have been down this road before. I'm sorry I don't remember.

ONLY GUESSING at this stage (I have a quick bit of time to reply to things)
So reading it and this is done on the fly:
<font color = "black"> <i class= "material-icons md-48"> check_circle_outline</i>
would be more correct?

Zenofmud.
I am not trying to be difficult and as I have said in this post I agree with Nick saying I should learn it right the first time......

"wrong" is a very vague word.

And I guess I am guilty of allowing this to continue as I use FF as my browser.
Way back when, IE (on windoze) was just toooooooo bad to use.

FF (or wasn't it formally Netscape?) was supposed to be a better browser.
Stupid me believes this and so have just kept using FF.

Anyway.....

"Wrong".
I read code written somewhere. I copy/paste it and change any variables that I am using.
If it works, I can't call it wrong.

I need to see good examples of what code should be.
I don't know how that stands as a reflection on me to where I go, but.....

Anyway, back to my reply.

I've scrolled down and now (just - honestly) seen Nick's reply of what the HTML should be.
I'm kind of chuffed that I got it right.

I hope that goes some way to showing I am wanting to learn and get better.

Anyway, thanks. I shall look at it more when I get home this afternoon/evening.

Appreciated.

[knolleary]

@Trying_to_learn

ONLY GUESSING at this stage (I have a quick bit of time to reply to things)

It is a bit more correct... However I gave you the fully correct html at the end of my reply.

[Trying_to_learn]

Thanks, and I think I mentioned that.

So the extra spaces were where I lost the gold star for getting it right?

That is something else which - alas - is sometimes my downfall.

I was taught (way back on a typewriter) to use the space bar between things.

But it would seem I am moving forwards. Though slowly it would seem.