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>