Where is a list of the Dashboard Icons?

FAQs
1

I am wanting to use the "icons" on some of my dashboards.

Searching I get this:
From this link

The most well-known are Awesome (http://fontawesome.io/icons/). The newer versions are not supported (4.7 and 5), but there are many others! To use an Awesome font, add fa – in front of the name of the icon. For example fa-fire .

Fantastic.
The picture on that page doesn't get down to the letter F.
It doesn't even complete B.

So where is the list of the names of these icons?

I have SOME of them installed - don't as me their names - but one is on a dashboard.
So it is somewhere on the machine.

Screenshot%20from%202018-08-11%2014-57-28
Screenshot from 2018-08-11 14-57-28.png1360×768 44.8 KB

If I go into the node I see:

<i class="fa fa-lightbulb-o fa-2x nr-dashboard-warning"></i>

Searching for it yields:

me@me-desktop:~/.node-red$ pwd
/home/me/.node-red
me@me-desktop:~/.node-red$ lr | grep lightbulb
  ----====  Recursive list starts here  ====----
me@me-desktop:~/.node-red$

So it ain't in the .node-red directory.

2

Fa-icons 4.7 is supported.
https://fontawesome.com/v4.7.0/icons/

1 Like
3

Ok, thanks.

B-u-t...

Does this mean that:

<i class="fa fa-lightbulb-o fa-2x nr-dashboard-warning"></i>

The icon is NOT on my machine and is downloaded?

4

No. Its already built into dashboard and available for use.

1 Like
5

Thanks, so I have to get the list of names from the site you supplied?

I am odds in that if they are "built into the dashboard" - how does anyone get the names of what they are?

I got "lightbulb" because it was in a flow I got somewhere. so it "magically" worked.

Is that clearer for the problem of their names?

6

I hear you. Though the info panel for both the button and switch widgets do have links

7

So basically I have to bookmark this link and get names from there as needed.

Ok.

I can handle that.

1 Like
8

Yes, that is correct.

9

Sorry to ask but I'm really a newbie on node-red matter...
I try to use awesome-fonts in a text node to display a door status : open or closed, using the door-open and door-closed icon. I use the following code as Value Format :

<font color= {{msg.color}} > <i class="fas fa-door-open"></i>{{msg.payload}} </font>

But, I don't get the door-open icon... I tried with fa instead of fas, to no avail. What is wrong with my code ? I also tried with fa-camera-retro, like the examples on Awesome site... and it worked.

Thanks for your help

10

I think the problem is that you are not really telling it to USE the icon.
Though you have named it, with the class=....... It doesn't work like that.

This is how I did something similar.
I will only post what I know, and I hope you can see how it all works.

msg  = {payload: '<font color = "black" i class="fa fa-cog fa-2x "></i>'};

That is part of a build/test flow (included if you want to look)

Basically you could leave out the msg.payload part.

It also depends on which node you put it into.

Hope that helped a bit.

[{"id":"d4f6c7de.5c3028","type":"inject","z":"9fb43887.43d798","name":"","topic":"","payload":"4","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":230,"y":400,"wires":[["45768493.f44edc"]]},{"id":"45768493.f44edc","type":"function","z":"9fb43887.43d798","name":"","func":"msg  = {payload: '<font color = \"black\" i class=\"fa fa-cog fa-2x \"></i>'};\nreturn msg;\n","outputs":1,"noerr":0,"x":370,"y":400,"wires":[["61084fb.faf18b"]]},{"id":"61084fb.faf18b","type":"ui_text","z":"9fb43887.43d798","group":"c9674ee2.6b7ff","order":8,"width":"2","height":"1","name":"94","label":"Blah","format":"{{msg.payload}}","layout":"row-center","x":580,"y":160,"wires":[]},{"id":"c9674ee2.6b7ff","type":"ui_group","z":"","name":"Group2","tab":"e68d55fd.06eaa8","order":2,"disp":true,"width":"6","collapse":false},{"id":"e68d55fd.06eaa8","type":"ui_tab","z":"","name":"TEMP","icon":"dashboard","order":25}]
11

I can't see door-open in the list of https://fontawesome.com/v4.7.0/icons/ are you sure its a v4.7 icon?

12

No, you are right. I found them here : https://fontawesome.com/icons?d=gallery&m=free. I thought it was all Awesome icons available to red-note users... but it seems these are v5.0 cions. And I can't see the door's icons in v4.7.0. I will try to find a good-looking door icon candidate in the other available fonts.
Thanks for your help

13

Thanks for your help.
Yes, I know that I did not use msg.payload correctly. In a first time, I just wanted to display a 'door' icon on the dashboard. But I did not success as, @ukmoose pointed out, the door icons are not part of the Awesome v4.7.0 set. I will try to find in the Material Design set...
Thanks again

14

not possible with the font awesome 5, juste v4.7, v5 is more complicate to implement (I just read it some minutes ago)

15

Note that you can also use icons from these locations:


16

This shows a quick view of the icons available:

17

The Icon field can be either a Material Design icon (e.g. 'check', 'close') or a Font Awesome icon (e.g. 'fa-fire') , or a Weather icon (e.g. 'wi-wu-sunny') .

You can use the full set of google material icons if you add 'mi-' to the icon name. e.g. 'mi-videogame_asset'.