Stuck getting weather icons-lite working

[Trying_to_learn]

Quick back story:
A long time ago I got weather icons installed and working on an early machine.

It (the icons) are working. Details: NR 1.0.3 Dashboard 2.20.0

Now:
I want to get the icons working on another machine.
NR 1.1.3 Dashboard: 2.23.2
Only updated the other day. (I forgot I updated it, but did it because this machine is now going to be needed and it hasn't been used for a long time, so I thought it would be a good thing to get it up to date.)

I exported the small part of the flow from the old machine and imported it.
(At this stage no CSS node was taken and no other fancy stuff was done)

The imported flow didn't work. I guess that is no surprise.

I think about what is happening and why.

Ah! I need to set that setting in the dashboard thing about using angular (what's its)

Done!

Still doesn't work.

Hmmmm....

I dig around more.

I then remembered I needed a CSS declaration node. (template?)

Found it on the original machine. Exported it. Imported it. Deployed.

Still doesn't work.

ARGH!

Oh! Yeah! The actual icon pack.

I went off and installed that. Missing the part at the top. (It happens)
Installed ok. The directory was there.

Still doesn't work.

This is getting annoying (that is me talking to myself.)

Then I was told I don't need to install the pack, as it is included in the newer Node-Red.
Yeah, ok. My bad. But I had forgotten I had actually updated the machine.
It happens.

I removed all the installed icons in .node-red/public/weathericons/*

Found an example flow. One icon, but..... I have to play with the cards I am dealt.

[{"id":"f320e767.c0b5a","type":"ui_template","z":"dde40def.3063f","group":"e4220cf0.2a6188","name":"ui_template","order":2,"width":"5","height":"5","format":"<div style=\"display: flex;height: 100%;justify-content: center;align-items: center;\">\n<i class=\"wi-wu-hazy wi-4x\" style=\"color:gold;\"></i>\n</div>","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":400,"y":220,"wires":[[]]},{"id":"bac691f5.da7428","type":"inject","z":"dde40def.3063f","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"str","x":190,"y":270,"wires":[["f320e767.c0b5a","15d5738e.daeae4"]]},{"id":"15d5738e.daeae4","type":"ui_template","z":"dde40def.3063f","group":"e4220cf0.2a6188","name":"ui_template Original","order":2,"width":"5","height":"5","format":"<div style=\"display: flex;height: 100%;justify-content: center;align-items: center;\">\n<i class=\"wi wi-darksky-thunderstorm wi-4x\" style=\"color:red;\"></i>\n</div>","storeOutMessages":false,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":430,"y":310,"wires":[[]]},{"id":"e4220cf0.2a6188","type":"ui_group","z":"","name":"weather-icons-lite","tab":"5084cb8e.261154","order":1,"disp":true,"width":"27","collapse":false},{"id":"5084cb8e.261154","type":"ui_tab","z":"","name":"Example","icon":"dashboard","order":7,"disabled":false,"hidden":false}]

I removed the rotate270 as it didn't really serve any benefit at this point.

That works. Good. I have a base line.
(note the two lines of text bottom right)

So I duplicate the node and see this:

So I see the code can work.

Ok, so.....

I then find a css_mapping link. This shows me all the icons and their names! Hurray!

Names!

(Can you see where this is going?)

So I put that in. DEPOLY and inject to set the icon.

Yeah. Right.

So although I am wanting to use sunrise and sunset which don't seem to be in this pack, so that is a whole other problem.
But given I am using an icon who's name is shown in the pack, it is really impossible for me to work on anything as there is no base line any more.

The one icon shown in the example works. But beyond that?

Although were was another flow, it required weather-underground (or what ever).
That is not really a usable example as I don't have an account with them and I think it is a bit presumptuous to make someone have to install other nodes to get an example working.
Why can't a flow be made which just creates all the icons locally?

Looking for more help I saw someone else asked for help in May.

Can you please add some instructions on how to install this ?
Readme says that it is already included in node-red.
However, when I imported this flow
https://gist.github.com/djiwondee/b5b7d5da14d24e71de447e6aa290937e
it doesn't pull in CSS and icons. I see in browser console that css is throwing 404.

Reply:

As you are already aware, this is integrated within the node-RED dashboard.
If it's not working for you within the node-RED environment, then please post in the node-RED forum when you can get support.

So I am asking here.

Someone.

Then I have to work out how to get the sunrise and sunset icons working.

[bakman2]

Check the purple border

What is missing in your code ?

To elaborate: the icon set has been created under a class of wi, under this class there are icons that have naming conventions wi-xxx-xxx

This applies to many icons sets, like font-awesome: fa fa-xxx, same for the weather icons wi wi-xxxx

[Trying_to_learn]

Thanks. Do you think it is the same for the sunrise and sunset icons?

They aren't listed in the set and alas are the ones I want (need) to use.

There are a couple which could be used, but they aren't quite the right ones.

[dceejay]

If they aren't here, then they aren't there. You have to use substitutes, and call them correctly.

[Trying_to_learn]

Thanks.

So (sorry, I have to ask) There is now no way of installing the larger set any more?

[dceejay]

Nothing has changed. The weather-icons-lite font is still built in and I thought that is what you were asking about.

[Trying_to_learn]

Well, I confused.

When I search about how to install weather icons and I get to the page, there is this big thing saying DO NOT INSTALL THIS AS IT IS PART OF NODE RED.

• See end:

I have already been down that rabbit hole and to the best of my knowledge: it didn't work when I imported a working flow from another machine.

Then I went through the story of remembering how to set the dashboard ui-type stuff to use angular.

Then I remembered I also had to import a template node to define use of weather icons.

Still didn't work.

Then I was told/shown that I don't need to and so went through the pain or removing it.

So really I don't know where I am or what to do.

I want the sunrise and sunset icons usable. They aren't in the lite pack.
I didn't even know of it and had installed the full pack.

I'll try again. I'm sure the computer is going to make a liar of me - as normal.

From the site searching "How to install weather icons" (no lite)

DO NOT USE - SEE WEATHER-ICONS-LITE WHICH IS MERGED INTO NODE-RED CORE

Idiots like me get confused when things like this are shown.