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 = ' '; Easy enough for me to understand. But the Material design are different: (again: for instance) msg.icon = ' check_circle_outline '; 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?

[image] 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.

[image] 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.

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.

For the ui_button node all you need do is put the icon name in the icon option For font awesome use: [10%20PM] if you want it bigger you just add the sizing option like [20%20PM] For material design use: [33%20PM] and this is what you will see: [37%20PM]

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.

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".

[image] 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 . 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 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: . 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. [image] 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 :slight_smile: Any follow-up questions, just ask away.

[image] 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.

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 [42%20AM] Each change node sets msg.ui_control: [29%20AM] 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}]

Node-RED

Node-RED Forum

Material design icons vs font awesome

Dashboard

zenofmud 27 June 2019 00:01 9

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)

Topic		Replies	Views
Font awesom icons - stuck. (Stacking) General	34	701	13 June 2024
Help with icon in `text` node Dashboard	12	4609	31 October 2020
Help with icons (Material design) General	14	400	24 October 2025
I am still not getting thse `buttons` and their settings Dashboard	21	1387	16 April 2020
Changing the color of the font awesome V5 or 6, possible? Dashboard	5	951	20 September 2021

Copyright OpenJS Foundation and Node-RED contributors. All rights reserved. The OpenJS Foundation has registered trademarks and uses trademarks. For a list of trademarks of the OpenJS Foundation, please see our Trademark Policy and Trademark List. Trademarks and logos not indicated on the list of OpenJS Foundation trademarks are trademarks™ or registered® trademarks of their respective holders. Use of them does not imply any affiliation with or endorsement by them.

Material design icons vs font awesome

Related topics