### Author:  [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [26 June 2019 17:44 UTC](https://discourse.nodered.org/t/material-design-icons-vs-font-awesome/12615/2 "2019-06-26T17:44:16Z")
They are different fonts from two different providers who have implemented it differently.
---
### Author:  [@zenofmud](https://discourse.nodered.org/u/zenofmud)
#### Post date: [26 June 2019 18:48 UTC](https://discourse.nodered.org/t/material-design-icons-vs-font-awesome/12615/3 "2019-06-26T18:48:02Z")
> [@Trying\_to\_learn](#):
>
> The `>` is throwing me.
Possible because your HTML is missing a `><`before the `i` - the line should be
msg.icon = '\<`i class="material-icons md-48"\>check\_circle\_outline';
---
### Author:  [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [26 June 2019 21:12 UTC](https://discourse.nodered.org/t/material-design-icons-vs-font-awesome/12615/4 "2019-06-26T21:12:44Z")
> [@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.
---
### Author:  [@zenofmud](https://discourse.nodered.org/u/zenofmud)
#### Post date: [26 June 2019 21:34 UTC](https://discourse.nodered.org/t/material-design-icons-vs-font-awesome/12615/5 "2019-06-26T21:34:13Z")
> [@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.
---
### Author:  [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [26 June 2019 21:39 UTC](https://discourse.nodered.org/t/material-design-icons-vs-font-awesome/12615/6 "2019-06-26T21:39:02Z")
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.
---
### Author:  [@zenofmud](https://discourse.nodered.org/u/zenofmud)
#### Post date: [26 June 2019 21:51 UTC](https://discourse.nodered.org/t/material-design-icons-vs-font-awesome/12615/7 "2019-06-26T21:51:09Z")
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:
---
### Author:  [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [26 June 2019 21:55 UTC](https://discourse.nodered.org/t/material-design-icons-vs-font-awesome/12615/8 "2019-06-26T21:55:15Z")
Yeah, thanks.
But I a sending them in the message.
So in one instance it could be:
`msg.icon = 'check_circle_outline';`
and in another it could be:
`msg = {icon: ''};`
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`.
---
### Author:  [@zenofmud](https://discourse.nodered.org/u/zenofmud)
#### Post date: [27 June 2019 00:01 UTC](https://discourse.nodered.org/t/material-design-icons-vs-font-awesome/12615/9 "2019-06-27T00:01:47Z")
go back and import the example in [Examples of Colour change button and switch](https://discourse.nodered.org/t/examples-of-colour-change-button-and-switch/3650) and see if you can spot your mistakes (note the plural)
---
### Author:  [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [27 June 2019 04:04 UTC](https://discourse.nodered.org/t/material-design-icons-vs-font-awesome/12615/10 "2019-06-27T04:04:10Z")
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".
---
### Author:  [@afelix](https://discourse.nodered.org/u/afelix)
#### Post date: [27 June 2019 09:15 UTC](https://discourse.nodered.org/t/material-design-icons-vs-font-awesome/12615/11 "2019-06-27T09:15:43Z")
> [@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 ``, which becomes the starting tag. However, the HTML needs to know where this font ends, so an ending tag is required: ``. In structured HTML, all tags need/should need (this discussion is for another topic I'd say) an ending tag. So everything between `` and `` 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 `` tag, you use the `href` attribute, that's the _key_: `this link goes to this site`. The text the link has, is contained in between the start and ending tag. That line becomes this: [this link goes to this site](https://discourse.nodered.org/)
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: `![the alternative text to show if this image cannot load]()
`. 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 `` tag, where a `color` attribute is specified, and inside a nested `` 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 `` 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.
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [27 June 2019 10:42 UTC](https://discourse.nodered.org/t/material-design-icons-vs-font-awesome/12615/12 "2019-06-27T10:42:01Z")
> [@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.
---
### Author:  [@zenofmud](https://discourse.nodered.org/u/zenofmud)
#### Post date: [27 June 2019 15:52 UTC](https://discourse.nodered.org/t/material-design-icons-vs-font-awesome/12615/13 "2019-06-27T15:52:45Z")
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](https://github.com/node-red/node-red-dashboard/blob/master/config-fields.md))
Flow of the ablve example:
```auto
[{"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}]
```
---
### Author:  [@Paul-Reed](https://discourse.nodered.org/u/Paul-Reed)
#### Post date: [27 June 2019 18:53 UTC](https://discourse.nodered.org/t/material-design-icons-vs-font-awesome/12615/14 "2019-06-27T18:53:41Z")
...and we haven't mentioned icon styling (modifiers) yet - sizing, rotating, colour...
See the available options in the readme for [weather-icons-lite](https://github.com/Paul-Reed/weather-icons-lite).
---
### Author:  [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [27 June 2019 20:52 UTC](https://discourse.nodered.org/t/material-design-icons-vs-font-awesome/12615/15 "2019-06-27T20:52:58Z")
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?
```auto
`msg.icon = 'check_circle_outline';`
`msg = {icon: ''};`
```
So the `` there and then.
It can be split.
As per the first line - and second.
> [@afelix](#):
>
> So everything between `` and `` becomes written in that font you set
But that goes _against_ the ` ...... ` 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 `` tag which explains the icon that is used.
```auto
`msg.icon = 'check_circle_outline';`
```
I'm guessing that that lonely `i` between `"black" i class` should be `` to match up with the one at the end.
And there's where it all falls down for me.
The `` and `` 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.
---
### Author:  [@zenofmud](https://discourse.nodered.org/u/zenofmud)
#### Post date: [27 June 2019 21:47 UTC](https://discourse.nodered.org/t/material-design-icons-vs-font-awesome/12615/16 "2019-06-27T21:47:09Z")
> go back and import the example in [Examples of Colour change button and switch](https://discourse.nodered.org/t/examples-of-colour-change-button-and-switch/3650) 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
---
### Author:  [@knolleary](https://discourse.nodered.org/u/knolleary)
#### Post date: [27 June 2019 22:34 UTC](https://discourse.nodered.org/t/material-design-icons-vs-font-awesome/12615/17 "2019-06-27T22:34:51Z")
> [@Trying\_to\_learn](#):
>
> So the `` there and then.
> It can be split.
No.
The following is not valid HTML at all.
```auto
check_circle_outline
```
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.
```auto
check_circle_outline
```
---
### Author:  [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [28 June 2019 03:12 UTC](https://discourse.nodered.org/t/material-design-icons-vs-font-awesome/12615/18 "2019-06-28T03:12:51Z")
> [@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:
` check_circle_outline`
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.
---
### Author:  [@knolleary](https://discourse.nodered.org/u/knolleary)
#### Post date: [28 June 2019 06:05 UTC](https://discourse.nodered.org/t/material-design-icons-vs-font-awesome/12615/19 "2019-06-28T06:05:03Z")
> [@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.
---
### Author:  [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)
#### Post date: [28 June 2019 07:10 UTC](https://discourse.nodered.org/t/material-design-icons-vs-font-awesome/12615/20 "2019-06-28T07:10:34Z")
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.
[Next page](https://discourse.nodered.org/t/material-design-icons-vs-font-awesome/12615.md?page=2)