Using own icons possible?

Couldn't see if this was possible, but can we import our own dashboard icons? The included custom icons don't cover the devices I would like to display.

Following. I've seen some others do this probably in the css, but an explanation would be priceless.

1 Like

You can shrink the hubitat icons till they are invisible and then use your own icons as the background image for the tile. Crude but it works.

1 Like

I use base-64 PNGs in my apps/drivers to keep their images local. I’ll test if this works with dashboards tomorrow :slight_smile:

The good news is that it doesn’t seem like the dashboards are parsing out base-64 images, and I think I can nail down some CSS once I get back on my laptop.

1 Like

I think the OP was referring to the action icons Adam

The icons in the center of each tile—correct? I was just testing to see if I could load a completely local element into the dashboard via base-64 :slight_smile: The goal being to use that as the icon. I’ll figure out the styling for that in a bit.

2 Likes

It can be done! First image is the CSS to disable the font icon and inject a background PNG in lieu of it (which I've removed in the image because it can't fit all of the required text). The second image is of the classic Garfield Thanksgiving Special icon I injected with base 64 encoding. This is sloppy CSS. I know there's another way to do this, but I just wanted to do a proof-of-concept, more than anything.

This is 100% local, so you'll never need to worry about icons going missing or anything.

BASE64CSS

2 Likes

Looks great! Can you make the icon dynamic?

Also as I have no clue how/where the CSS code is to be inserted. The documentation appears to be sparse to non existent as to how to implement custom CSS in the dashboard as far as I can tell from searching.

TBH user icons should really be an included feature - the average user is never going to be able to do this.

2 Likes

Sure! Just use the different class selector for each of the active icons.

CSS is under the advanced settings tab. I’d love to see all of this built out in the dashboard, but for now, if none of the built-in icons will work, this will have to do.

Thanks, unfortunately there's nothing in that tab when I looked so no examples as to what to do. Any chance you could provide the sample xml for the icon you posted to see how it hangs together?