Locally stored image for UI Page icon

Dashboard
1

I already have an icon saved in /data/static folder and able to open in browser. What should i type at UI Page icon setting to use stored image?

2

Are you serving the image?

I.e. did you add http-in -> file read -> http-response (example) OR modify your settings.js file to add httpStatic (docs)

1 Like
3

Im using settings.js and enable httpStatic route.

4

ok, can you access the image in your browser? for example, if your image is named test.png can you access it using the node-red main url + any static path setting + /test.png?

If you are unsure, show us your node-red start up log (it lists out http static entries and the path they will use)

also, which settings.js file have you modified? (full path please)

1 Like
5

Yes. I can access image in browser.

Settings.js I only uncomment httpStatic.

6

Ah, so rereading your first post, the issue isnt hosting/viewing the image, it is setting the pages icon on the side menu? You might have to do this via scripting (in a ui-template) or custom CSS (also in a ui-template).

Do a bit digging in devtools. In the mean time, someone who has time to look into this might pop in with a solution for you.

1 Like
7

Okay I managed to using locally stored icon using below command

.v-navigation-drawer--rail .v-list .v-list-item:nth-of-type(2) .v-icon {
  background-image: url("/assets/icons/homecustom.png"); 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  width: 36px !important;
  height: 36px !important;

  font-size: 0 !important;       /* Hide default MDI icon */
  color: transparent !important;
}
4 Likes