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.ic…

[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/…

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…

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 …

[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 tr…

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/no…

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	427	13 June 2024
Help with icon in `text` node Dashboard	12	4488	31 October 2020
Help with icons (Material design) General	14	286	24 October 2025
I am still not getting thse `buttons` and their settings Dashboard	21	1338	16 April 2020
Changing the color of the font awesome V5 or 6, possible? Dashboard	5	912	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