# Help with icons (Material design)

**URL:** <https://discourse.nodered.org/t/help-with-icons-material-design/99470>\
**Category:** General\
**Created:** [21 October 2025 11:29 UTC](https://discourse.nodered.org/t/help-with-icons-material-design/99470 "2025-10-21T11:29:56Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [21 October 2025 11:29 UTC](https://discourse.nodered.org/t/help-with-icons-material-design/99470/1 "2025-10-21T11:29:56Z")

</div>

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.

```auto
<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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [21 October 2025 14:15 UTC](https://discourse.nodered.org/t/help-with-icons-material-design/99470/2 "2025-10-21T14:15:05Z")

</div>

Does your previous post(s) not help?

> [@Is anybody familiar with creating a weather api in node-red please share a example](https://discourse.nodered.org/t/is-anybody-familiar-with-creating-a-weather-api-in-node-red-please-share-a-example/89962/4):
>
> 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! 🤷‍♂️

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [22 October 2025 01:26 UTC](https://discourse.nodered.org/t/help-with-icons-material-design/99470/3 "2025-10-22T01:26:16Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [22 October 2025 01:41 UTC](https://discourse.nodered.org/t/help-with-icons-material-design/99470/4 "2025-10-22T01:41:41Z")

</div>

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

I got this code:

```auto
<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.

 ![Screenshot from 2025-10-22 12-39-00](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/3/b34ad92ff04dfa023e5e70281ccf5ccfa1c02c34.png)

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

 ![Screenshot from 2025-10-22 12-37-58](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/3/c/3c705f58740b69a9498a5c363147a5f2191ff4a5.png)

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

Confused - as per normal.

---

<div class="post-metadata">

**Author:** ![KristopherLeads](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/kristopherleads/32/107231_2.png) [@KristopherLeads](https://discourse.nodered.org/u/KristopherLeads)\
**Post date:** [22 October 2025 16:23 UTC](https://discourse.nodered.org/t/help-with-icons-material-design/99470/5 "2025-10-22T16:23:36Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [22 October 2025 18:49 UTC](https://discourse.nodered.org/t/help-with-icons-material-design/99470/6 "2025-10-22T18:49:46Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [22 October 2025 22:55 UTC](https://discourse.nodered.org/t/help-with-icons-material-design/99470/7 "2025-10-22T22:55:26Z")

</div>

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

```auto

  <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"/>

```

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [23 October 2025 02:14 UTC](https://discourse.nodered.org/t/help-with-icons-material-design/99470/8 "2025-10-23T02:14:44Z")

</div>

> [@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.

☹

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [23 October 2025 12:32 UTC](https://discourse.nodered.org/t/help-with-icons-material-design/99470/9 "2025-10-23T12:32:49Z")

</div>

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 -

```auto
<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>

```

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [23 October 2025 19:47 UTC](https://discourse.nodered.org/t/help-with-icons-material-design/99470/10 "2025-10-23T19:47:11Z")

</div>

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](https://pictogrammers.com/library/mdi/icon/currency-usd/)**
>
> The icon "currency-usd" was added in v1.5.54 of the Material Design Icons icon library.

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.

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [23 October 2025 19:50 UTC](https://discourse.nodered.org/t/help-with-icons-material-design/99470/11 "2025-10-23T19:50:50Z")

</div>

> [@Trying\_to\_learn](#):
>
> `mdiCurrencyUsd`

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

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [23 October 2025 19:52 UTC](https://discourse.nodered.org/t/help-with-icons-material-design/99470/12 "2025-10-23T19:52:12Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Buckskin](https://avatars.discourse-cdn.com/v4/letter/b/b9e5f3/32.png) [@Buckskin](https://discourse.nodered.org/u/Buckskin)\
**Post date:** [23 October 2025 21:10 UTC](https://discourse.nodered.org/t/help-with-icons-material-design/99470/13 "2025-10-23T21:10:33Z")

</div>

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

```auto
<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](https://materializecss.com/icons.html)

---

<div class="post-metadata">

**Author:** ![Sean-McG](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/sean-mcg/32/54677_2.png) [@Sean-McG](https://discourse.nodered.org/u/Sean-McG)\
**Post date:** [23 October 2025 23:25 UTC](https://discourse.nodered.org/t/help-with-icons-material-design/99470/14 "2025-10-23T23:25:29Z")

</div>

> [@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](https://discourse.nodered.org/t/suggestion-for-which-icons-to-use/57964/10):
>
> 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](https://icon-sets.iconify.design/)

> [@Is it possible to use the \`mdi\` icons in a \`text\` node?](https://discourse.nodered.org/t/is-it-possible-to-use-the-mdi-icons-in-a-text-node/60387/9):
>
> 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)

---

<div class="post-metadata">

**Author:** ![Trying\_to\_learn](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/trying_to_learn/32/28400_2.png) [@Trying\_to\_learn](https://discourse.nodered.org/u/Trying_to_learn)\
**Post date:** [24 October 2025 04:46 UTC](https://discourse.nodered.org/t/help-with-icons-material-design/99470/15 "2025-10-24T04:46:12Z")

</div>

> [@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.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [7 November 2025 04:46 UTC](https://discourse.nodered.org/t/help-with-icons-material-design/99470/16 "2025-11-07T04:46:18Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.