Is it possible to use the `mdi` icons in a `text` node?

[Trying_to_learn]

(Sorry folks, but I am stuck.)

NR 2.2.0
Dashboard: 3.1.6

I have kind of been down this path before, but things have thrown a curve ball at me and I am wanting to know if it is possible.

This is what I have now in a function node to create a message to go to a text node.

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

Then there is
msg = {payload: '<font color = "cyan" i class="fa fa-cog fa-2x "></i>'};
as the second option.

What I didn't consider is the third option:
msg = {payload: '<font color = "black" i class="fa fa-ban fa-2x "></i>'};

So I am wanting to get that working but with the newer mdi icons.

So this is my starting point:

msg.payload = '<iconify-mdi:fan 46px fa-spin>';

But it doesn't show/work.

So before wasting more time I guess I'd better check if it is possible at all.
(Ok, there is a bit of chopping and changing in the examples. The colour attributes are wanted, but until I can get the basics working I am not going to worry about it as if it can't be done, it doesn't matter anyway.)

After more study, I have even got the payload to be this:
msg.payload = '<class = "iconify-mdi:fan 46px fa-spin">';

Still nothing.

[Paul-Reed]

@Trying_to_learn

mdi:fan 46px fa-spin

Isn't fa-spin a 'font awesome' class?
(fa = font awesome)

A quick look at the mdi readme shows mdi-spin as the correct class for spinning, and mdi-46px for size adjustments.

[Trying_to_learn]

Thanks Paul, but that's where I am out of my depth.

A while back I was pointed to use this new breed of icons (Here))

And they work. But I have no idea how.

I added the two lines required to make them usable:

<script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
<script src="https://fonts.google.com/icons"></script>

But then it is just beyond me.

It works fine if I just have an on/off icon. That's fine. But if the machine is off line I bring the ban icon into things and the wheels fall off.

Originally I was told to use the switch (GUI) node and set the two icons for the on/off state there - and that works.

But as I have since realised with wanting to add the third state (of off-line) it doesn't work.

The switch node doesn't have a third state and so I have to use the text node.

If you read the other thread (towards the bottom) I get stuck with getting this new icon to spin.
(Scroll to post 33 in that thread)

I was being a good boy scout and constructing the commands using the new icon's theme.
But it was pointed out that it is covered by the FA (font awesome) icon qualifiers and so I use fa-spin to spin it, even though it technically isn't their icon.
(That is way WAY above me in understanding how it works.)

I put the fa-spin and it spins.

So I'm stuck on how to use this new set of icons in a text node rather than a switch node.

This is from where I believe I am getting the icon:
search for fan

And I get the icon.

Considering I have it sort of working, I seem to be missing something about how to make it more generic with its use, so I can use it like the font awesome and material design icons.

At least they have a bit more understandable page on how to use them.
This is all I can see on how to use this new type.

And it is very different to the two lines I posted at the start to get them usable.

So again I am out of my depth in being able to make sense of the instructions.

[xx_Nexus_xx]

Hmm... maybe you should try the multi-switch from Bart .. more details here

[Trying_to_learn]

But that isn't allowing me to put 3 icons in the one space depending on the condition of the fan.

[xx_Nexus_xx]

Bart is working closely with hotnipi ... @hotnipi is king of CSS .. i'm sure he will be able to get this integrsted in this node .. just raise a request with em on github

[Trying_to_learn]

I am trying to see how it is done normally.

I got the material design icons working. I got the font awesome icons working too.

This new breed seem more difficult to use.
Which I get may be part of the deal.

But it would be nice if I could work it out reading what is out there.
As I see it, there are a lot of icons and stuff, but they seem to be missing how to use them, which detracts partly from their usability.

[Paul-Reed]

@Trying_to_learn

A while back I was pointed to use this new breed of icons (Here) )

Ah OK, you didn't say that in your first post, so I assumed from your topic title that you were loading & using the mdi icon collection - https://materialdesignicons.com/

[Trying_to_learn]

Ok, I didn't explain it quite well enough.

But isn't iconify-mdi:fan 46px fa-spin enough to say I am using the mdi icons?

Anyway, I'm stuck on how to use them in/on a text node rather than the switch node.

(I'm now even more confused in that the link you posted is different to one I posted and that is also different to a third link which is google icons which some how got brought into this.

(But that/this is a whole different problem I think)

[smcgann99]

Give this a try only took me about 2 hours to figure out

[{"id":"1b70296512cff1f7","type":"ui_text","z":"5ae69456be119464","group":"365f6b900be3a1a6","order":3,"width":"4","height":1,"name":"test","label":"{{msg.payload}}","format":"","layout":"col-center","className":"","x":850,"y":160,"wires":[]},{"id":"798960aa3a4558a3","type":"inject","z":"5ae69456be119464","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"<font size=\"7\">  <font color=\"lime\" <span class=\"iconify icon:mdi:fan fa-spin\"></span> </font>","payloadType":"str","x":610,"y":120,"wires":[["1b70296512cff1f7"]]},{"id":"e81850f80616b7c7","type":"inject","z":"5ae69456be119464","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"<font size=\"7\">  <font color=\"cyan\" <span class=\"iconify icon:mdi:fan\"></span> </font>","payloadType":"str","x":610,"y":160,"wires":[["1b70296512cff1f7"]]},{"id":"49d8b2d2e8727634","type":"inject","z":"5ae69456be119464","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"","payload":"<font size=\"7\">  <font color=\"black\" <span class=\"fa fa-ban\"></span> </font>","payloadType":"str","x":610,"y":200,"wires":[["1b70296512cff1f7"]]},{"id":"365f6b900be3a1a6","type":"ui_group","name":"Group","tab":"dc50fb1.77df988","order":null,"disp":true,"width":6},{"id":"dc50fb1.77df988","type":"ui_tab","name":"Home Page","icon":"","order":1,"disabled":false,"hidden":false}]

[Trying_to_learn]

You are the man! Thanks @smcgann99

I tested it on my main machine and it works.
Now I'll apply it to my other machine/s.

If it took you 2 hours, it would have taken me 2 weeks.