Help with icons (Material design)

[Trying_to_learn]

Sorry folks, I know I am kind of being stubborn.

I looked at my previous post hoping it would help, but doesn't.

I have a button (ui_template node) set up and it has a material design icon in it, but I'm wanting to change it as there is a new use for said button, and so it would be nice if the icon changed too.

This is the setup for it.

<div id="GButtonM_BIL">
    <md-button class="md-button program-names darkred">
        <i class="material-icons">
            <span> track_changes</span>
            <md-tooltip>Telemetry</md-tooltip>
        </i>
    </md-button>
</div>

And I'm wanting something for bills.
I've found this one:

import Icon from '@mdi/react';
import { mdiCurrencyUsd } from '@mdi/js';

<Icon path={mdiCurrencyUsd} size={1} />

But have no idea how to...... use it.

Sorry. It has been a LONG TIME since I've played with this sort of stuff and I can't remember.

Mr ChatGPT may be helpful, but sometimes I prefer human help.
(Don't let him hear me saying that)

Someone - please.

[Steve-Mcl]

Does your previous post(s) not help?

Is anybody familiar with creating a weather api in node-red please share a example

I'm not sure if this is what you want/need but I wrote a weather display thing. You need open-weather (key needed) It is a bit of a dog's breakfast as it still has some testing stuff. But all in all it does a fairly good job of showing me the weather for the place selected. THERE IS A SUBFLOW IN IT! That does all the magic of decoding the weather and displaying the icons. FOREIGN ICONS ARE USED ALSO! Sorry, I am not good at documenting things. [{"id":"9aaa840a.131cf8","type":"subflow","n…

The flow in this post has elements with material icons in!

[Trying_to_learn]

It was another post I asked (and promptly solved myself that I was offered when I searched.
Not the one you found.

Gotta love searches.

[Trying_to_learn]

After a bit of help from.......

I got this code:

<div id="GButtonM_BIL">
    <md-button class="md-button program-names darkred">
        <svg viewBox="0 0 24 24" style="width:24px;height:24px;fill:currentColor;">
            <path
                d="M12 1C5.92 1 1 5.92 1 12S5.92 23 12 23 23 18.08 23 12 18.08 1 12 1M13 19.93V18.96C15.39 18.72 17 17.06 17 15H15C15 16.11 14.11 17 13 17H11C9.89 17 9 16.11 9 15C9 13.89 9.89 13 11 13H13C14.66 13 16 11.66 16 10C16 8.22 14.5 6.78 12.5 6.54V5.5H11.5V6.53C9.5 6.77 8 8.21 8 10H10C10 8.89 10.89 8 12 8H13C14.11 8 15 8.89 15 10C15 11.11 14.11 12 13 12H11C9.34 12 8 13.34 8 15C8 17.06 9.61 18.72 12 18.96V19.93C6.95 19.44 3 15.19 3 10C3 5.58 6.58 2 11 2S19 5.58 19 10C19 14.42 15.42 18 11 18C10.78 18 10.56 17.97 10.35 17.93C11.22 18.47 12.09 18.77 13 18.96V19.93Z" />
        </svg>
        <md-tooltip>BILLS</md-tooltip>
    </md-button>
</div>

(I'm not going to ask what that huge number is, but......)

This is what is shown on THE web page for the icon and what it should look like.

And yet, this is what it looks like on my dashboard:
(cropped of course)

It sorta looks like the FireFox logo..... Sort of.
But it is flipped.

Confused - as per normal.

[KristopherLeads]

Are you sure you're editing the proper div? You might have some nested div that is overriding this image.

[Trying_to_learn]

Sorry but I hope I'm not.

All this is very new and I am only Doing what I'm told.

I've since found out that that Big number is the SVG for the icon.

[Sean-McG]

That big number looks exactly like the image you have in your button, so nothing is wrong except that you have the wrong "big number"

Where did you get it from, I suspect you clicked the wrong icon ?

Change the path part as follows

  <path d="M441-120v-86q-53-12-91.5-46T293-348l74-30q15 48 44.5 73t77.5 25q41 0 69.5-18.5T587-356q0-35-22-55.5T463-458q-86-27-118-64.5T313-614q0-65 42-101t86-41v-84h80v84q50 8 82.5 36.5T651-650l-74 32q-12-32-34-48t-60-16q-44 0-67 19.5T393-614q0 33 30 52t104 40q69 20 104.5 63.5T667-358q0 71-42 108t-104 46v84h-80Z"/>

[Trying_to_learn]

@Sean-McG

Where did you get it from

No, that was ChatGPT's effort.

Thanks I'll give it a try.

Sorry, doesn't work.

Blank button.

<div id="GButtonM_BIL">
    <md-button class="md-button program-names darkred">
        <svg viewBox="0 0 24 24" style="width:24px;height:24px;fill:currentColor;">
            <path
                d="M441-120v-86q-53-12-91.5-46T293-348l74-30q15 48 44.5 73t77.5 25q41 0 69.5-18.5T587-356q0-35-22-55.5T463-458q-86-27-118-64.5T313-614q0-65 42-101t86-41v-84h80v84q50 8 82.5 36.5T651-650l-74 32q-12-32-34-48t-60-16q-44 0-67 19.5T393-614q0 33 30 52t104 40q69 20 104.5 63.5T667-358q0 71-42 108t-104 46v84h-80Z"/>
        </svg>
        <md-tooltip>BILLS</md-tooltip>
    </md-button>
</div>

[Sean-McG]

Based on conversations we had in 2022, I thought you were using iconify ?

In any case why not make your life easy and just use text -

<div id="GButtonM_BIL">
    <md-button class="md-button program-names darkred">
        <span style="font-size:24px;font-weight:bold;">$</span>
        <md-tooltip>BILLS</md-tooltip>
    </md-button>
</div>

[Trying_to_learn]

Sean,

I possibly am. Alas I don't remember that long ago.

I searched the web, got help from ..... GPT and that is where it took me.
I was wanting that solution - the one you posted - but wasn't sure on the structure.
I'll try it now.

IT WORKS

(Of course it does.)

So (I'm still looking at the code and have ONLY JUST got up.)

When I was searching for the correct icon I thought the names was currency-usd

currency-usd - Material Design Icons - Pictogrammers

And yet I'm not seeing that in your code.
(Just saying)

So that is one - of probably many - points of failure on my part.

[Buckskin]

@Trying_to_learn

mdiCurrencyUsd

The actual name of the icon is mdi-currency-usd

[Trying_to_learn]

Ok, I stand corrected.

But I can't even find that in the code, so as much as it is true: it doesn't help me understand how it works in the bigger picture.

[Buckskin]

Hi Andrew, I know you have already solved this but I got interested in the original requirement. There appears to be more than 1 source of mdi icons. Using the same icon style as you used for your telemetry button

<div id="GButtonM_BIL">
    <md-button class="md-button program-names darkred">
        <i class="material-icons">
            <span> attach_money</span>
            <md-tooltip>Bills</md-tooltip>
        </i>
    </md-button>
</div>

It would seem that in that source the US currency is called attach_money I found them here: Icons - Materialize

[Sean-McG]

@Sean-McG

$

It is literally just that text i.e. the standard dollar symbol on your keyboard, so need for svgs etc.

Previous discussions we have had around iconify -

Suggestion for which icons to use

If you put this in a template added to head section you can use thousands of iconify icons then. <script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script> Then in switch node use custom icons set to iconify-mdi:fan-auto and iconify-mdi:fan Browse icons at iconify

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

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)

[Trying_to_learn]

@Sean-McG

It is literally just that text i.e. the standard dollar symbol on your keyboard, so need for svgs etc.

Previous discussions we have had around iconify -

So (And I know it is now obvious) if I had just put the text $ and maybe beefed up the size I would have got the same result.