# Dashboard button node Icon Property to show jpg image

**URL:** <https://discourse.nodered.org/t/dashboard-button-node-icon-property-to-show-jpg-image/42195>\
**Category:** Dashboard\
**Created:** [7 March 2021 12:04 UTC](https://discourse.nodered.org/t/dashboard-button-node-icon-property-to-show-jpg-image/42195 "2021-03-07T12:04:48Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![guenter-ms](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/guenter-ms/32/38372_2.png) [@guenter-ms](https://discourse.nodered.org/u/guenter-ms)\
**Post date:** [7 March 2021 12:04 UTC](https://discourse.nodered.org/t/dashboard-button-node-icon-property-to-show-jpg-image/42195/1 "2021-03-07T12:04:48Z")

</div>

Hi, I'm new and tried to search a solution for a simple question:  
I like to show an image file (jpg) as a / on a button node. How do I have to fill the "Icon" property? Nodered is running on an raspi3.  
a) how to define a path to the image file?  
b) how to configure a variable name in the property and fill this variable with a e.g. change node?  
THANK YOU!  
guenter

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [8 March 2021 13:02 UTC](https://discourse.nodered.org/t/dashboard-button-node-icon-property-to-show-jpg-image/42195/2 "2021-03-08T13:02:18Z")

</div>

Welcome to the forum.

As usual in such cases a good approach is using CSS to style your UI.

I don´t think you can work with the icon field in the configuration dialog. Instead you better to target the button with a CSS selector and use the [CSS background-image property.](https://www.w3schools.com/cssref/pr_background-image.asp)

---

<div class="post-metadata">

**Author:** ![guenter-ms](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/guenter-ms/32/38372_2.png) [@guenter-ms](https://discourse.nodered.org/u/guenter-ms)\
**Post date:** [9 March 2021 12:23 UTC](https://discourse.nodered.org/t/dashboard-button-node-icon-property-to-show-jpg-image/42195/3 "2021-03-09T12:23:06Z")

</div>

Thank you!

Can you give me an easy example how to manage it in nodered? Just a dashboard button showing an image with css background-image property. That would make my break-though!

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [9 March 2021 14:21 UTC](https://discourse.nodered.org/t/dashboard-button-node-icon-property-to-show-jpg-image/42195/4 "2021-03-09T14:21:13Z")

</div>

Sure, it is easy.

These are the lines to add in your CSS styling inside an ui\_template node. There is a rule in it telling that the buttons inside the group "Group1" , dashboard "Tab1" should have a background image.

```auto
<style>

#Tab1_Group1 button {
    background-color: rgb(255,0,0);
    background-image: url("/nri/cluster-fuel.png");
    background-size: cover;
}
</style>

```

Then the trick is to configure the static folder in your "setting.js" file correctly. The URL that you see in the CSS configuration is relative the the static path configured in your environment. Search this forum for "static folder" to understand how to configure it correctly.

If you test and all is good you should see an image. I tested with below results:

![r-1](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/b/6/b6b886e51f2d740a4c659482e2217c3381116656.jpeg)

On the other hand, if you see a standard button with a red background it means you did not get right the configuration of the static folder. Note that the CSS selector `#Tab1_Group1 button` must match the name of the tab and group you use in your dashboard (tab\_group , separated by underline)

```auto
[{"id":"d5e31309.28ca2","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"a58c8218.1981b","type":"ui_template","z":"d5e31309.28ca2","group":"9c9a39bf.1be348","name":"Styling","order":8,"width":0,"height":0,"format":"<style>\n\n#Tab1_Group1 button {\n background-color: rgb(255,0,0);\n background-image: url(\"/nri/cluster-fuel.png\");\n background-size: cover;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":510,"y":140,"wires":[[]]},{"id":"10347ce3.586fb3","type":"ui_button","z":"d5e31309.28ca2","name":"","group":"9c9a39bf.1be348","order":0,"width":"6","height":"4","passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":510,"y":180,"wires":[[]]},{"id":"9c9a39bf.1be348","type":"ui_group","z":"","name":"Group1","tab":"de7542ce.e7d19","order":2,"disp":true,"width":"6","collapse":false},{"id":"de7542ce.e7d19","type":"ui_tab","z":"","name":"Tab1","icon":"dashboard","order":31}]

```

---

<div class="post-metadata">

**Author:** ![guenter-ms](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/guenter-ms/32/38372_2.png) [@guenter-ms](https://discourse.nodered.org/u/guenter-ms)\
**Post date:** [9 March 2021 16:23 UTC](https://discourse.nodered.org/t/dashboard-button-node-icon-property-to-show-jpg-image/42195/5 "2021-03-09T16:23:39Z")

</div>

oh dear, not so easy for me….

I have a lot of questions:  
Can I use this method to assign different images to buttons? I understood that all buttons in a tab are affected by the style you defined.  
I see a red button and can change the background-color in the style. If I define a 2nd button, it is affected by the same background-color.  
I searched for „static folder“ in the forum and did not get really clearness. Do you have a link to the right topic?  
Is there a „static folder“ to be defined in the settings.js file? How?  
I found a settings.js in the redmatic/etc path, see json below. Is the „userDir“ the „static folder“?  
And if I have to define a relative path in the style, why does your example start with an absolute path „/nri/cluster-fuel.png“?

Don’t bluster me, maybe I’m to old for that….

Best Guenter

{  
"uiPort": 1880,  
"uiHost": "127.0.0.1",  
"flowFile": "flows.json",  
"userDir": "/usr/local/addons/redmatic/var",  
"httpRoot": "/addons/red",  
"logging": {  
"ain": {  
"level": "debug",  
"metrics": false,  
"audit": false  
}  
},  
"contextStorage": {  
"default": {  
"module": "file"  
},  
"memory": {  
"module": "memory"  
},  
"file": {  
"module": "localfilesystem",  
"config": {  
"dir": "/media/usb1",  
"flushInterval": 30  
}  
}  
},  
"editorTheme": {  
"projects": {  
"enabled": false  
}  
},  
"restartOnCrash": 2,  
"ccuBackup": "full"  
}

> ![](https://sea2.discourse-cdn.com/flex016/user_avatar/discourse.nodered.org/andrei/45/10446_2.png "Andrei") | [Andrei](https://discourse.nodered.org/u/andrei)  
> 9 March |
> 
> - | - |

Sure, it is easy.

These are the lines to add in your CSS styling inside an ui\_template node. There is a rule in it telling that the buttons inside the group "Group1" , dashboard "Tab1" should have a background image.

```auto
<style>

#Tab1_Group1 button {
    background-color: rgb(255,0,0);
    background-image: url("/nri/cluster-fuel.png");
    background-size: cover;
}
</style>

```

Then the trick is to configure the static folder in your "setting.js" file correctly. The URL that you see in the CSS configuration is relative the the static path configured in your environment. Search this forum for "static folder" to understand how to configure it correctly.

If you test and all is good you should see an image. I tested with below results:

On the other hand, if you see a standard button with a red background it means you did not get right the configuration of the static folder. Note that the CSS selector `#Tab1_Group1 button` must match the name of the tab and group you use in your dashboard (tab\_group , separated by underline)

```auto
[{"id":"d5e31309.28ca2","type":"tab","label":"Flow 1","disabled":false,"info":""},{"id":"a58c8218.1981b","type":"ui_template","z":"d5e31309.28ca2","group":"9c9a39bf.1be348","name":"Styling","order":8,"width":0,"height":0,"format":"<style>\n\n#Tab1_Group1 button {\n background-color: rgb(255,0,0);\n background-image: url(\"/nri/cluster-fuel.png\");\n background-size: cover;\n}\n</style>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"global","x":510,"y":140,"wires":[[]]},{"id":"10347ce3.586fb3","type":"ui_button","z":"d5e31309.28ca2","name":"","group":"9c9a39bf.1be348","order":0,"width":"6","height":"4","passthru":false,"label":"button","tooltip":"","color":"","bgcolor":"","icon":"","payload":"","payloadType":"str","topic":"","x":510,"y":180,"wires":[[]]},{"id":"9c9a39bf.1be348","type":"ui_group","z":"","name":"Group1","tab":"de7542ce.e7d19","order":2,"disp":true,"width":"6","collapse":false},{"id":"de7542ce.e7d19","type":"ui_tab","z":"","name":"Tab1","icon":"dashboard","order":31}]

```

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [9 March 2021 16:58 UTC](https://discourse.nodered.org/t/dashboard-button-node-icon-property-to-show-jpg-image/42195/6 "2021-03-09T16:58:41Z")

</div>

> [@guenter-ms](#):
>
> I understood that all buttons in a tab are affected by the style you defined.

You are right. You might circumvent this by creating a different group to each button.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [9 March 2021 17:05 UTC](https://discourse.nodered.org/t/dashboard-button-node-icon-property-to-show-jpg-image/42195/7 "2021-03-09T17:05:54Z")

</div>

Not quite. There is pretty many tricks to select child of known element  
for example:

```auto
#Home_Buttons_cards > md-card:nth-child(5) > button

```

or select by `aria-label` if your buttons have static labels...  
and/or differentiate by unit size ...

---

<div class="post-metadata">

**Author:** ![Andrei](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/andrei/32/10446_2.png) [@Andrei](https://discourse.nodered.org/u/Andrei)\
**Post date:** [9 March 2021 17:09 UTC](https://discourse.nodered.org/t/dashboard-button-node-icon-property-to-show-jpg-image/42195/8 "2021-03-09T17:09:01Z")

</div>

> [@guenter-ms](#):
>
> Do you have a link to the right topic?

[Have a look in this one.](https://discourse.nodered.org/t/make-a-button-link-to-another-page-html/880/2)

> [@guenter-ms](#):
>
> Is there a „static folder“ to be defined in the settings.js file? How?  
> I found a settings.js in the redmatic/etc path, see json below. Is the „userDir“ the „static folder“?

Look at Node-RED the initialization log. It will show you what is your static file. At the time of this writing I am using windows and this is how the initialization log looks like.

 ![r-2](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/6/b/6b2ca6cf87a3ff79af6ce4fb4625d0b4ef9d8bb7.jpeg)

The static path is: `C:/Users/OCM/.node-red/static`

The target image is on folder: `C:/Users/OCM/.node-red/static/nri`

Therefore I configure the URL statement this way:  
`background-image: url("/nri/cluster-fuel.png");`

The initialization log also tells you where you can find the settings.js file. In my case:

 ![r-3](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/e/5/e5dfcf327a71800e52d698114b1f38114406c98d.jpeg)

---

<div class="post-metadata">

**Author:** ![guenter-ms](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/guenter-ms/32/38372_2.png) [@guenter-ms](https://discourse.nodered.org/u/guenter-ms)\
**Post date:** [10 March 2021 09:54 UTC](https://discourse.nodered.org/t/dashboard-button-node-icon-property-to-show-jpg-image/42195/9 "2021-03-10T09:54:24Z")

</div>

Hi,

I don’t have the HTTP static entry in my log. Dashboard version is 2.28.1, see below.

I have read the linked topic. Everything is very complicated for me on a css / programming level with. What I’m really missing is a set of nodes, where things can be defined without css knowledge.

I also read the uibuilder, but that needs web developer knowledge as well.

Seems that its too complicated for me. In every case: Thank you!!!

 ![Bildschirmfoto 2021-03-10 um 10.32.24.jpg](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/7/c7c3afbb1d9a321e958fcf61558330427bdaccc1.jpeg)

> ![](https://sea2.discourse-cdn.com/flex016/user_avatar/discourse.nodered.org/andrei/45/10446_2.png "Andrei") | [Andrei](https://discourse.nodered.org/u/andrei)  
> 9 March |
> 
> - | - |

> ![](https://sea2.discourse-cdn.com/flex016/user_avatar/discourse.nodered.org/guenter-ms/40/38372_2.png)guenter-ms:
> 
> Do you have a link to the right topic?

[Have a look in this one.](https://discourse.nodered.org/t/make-a-button-link-to-another-page-html/880/2)

> ![](https://sea2.discourse-cdn.com/flex016/user_avatar/discourse.nodered.org/guenter-ms/40/38372_2.png)guenter-ms:
> 
> Is there a „static folder“ to be defined in the settings.js file? How?  
> I found a settings.js in the redmatic/etc path, see json below. Is the „userDir“ the „static folder“?

Look at Node-RED the initialization log. It will show you what is your static file. At the time of this writing I am using windows and this is how the initialization log looks like.

The static path is: `C:/Users/OCM/.node-red/static`

The target image is on folder: `C:/Users/OCM/.node-red/static/nri`

Therefore I configure the URL statement this way:  
`background-image: url("/nri/cluster-fuel.png");`

The initialization log also tells you where you can find the settings.js file. In my case:

---

<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:** [9 April 2021 09:54 UTC](https://discourse.nodered.org/t/dashboard-button-node-icon-property-to-show-jpg-image/42195/10 "2021-04-09T09:54:51Z")

</div>

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