Custom icons via file manager/hosted

🧰 Built-In Apps and Drivers Dashboard
1

This question has been asked a couple times recently, and I just figured out how to do it. Taking a second to post my findings here for any that want to use this method. Input, and improvements welcomed.

As a side note - if a "browse" button could be added to HE custom icons section, allowing you to pick SVG's saved in file manager that would be sweet!! Until then....

Thank you @spelcheck for the assist.

Question - How can I use my own custom icons/Can I use my own icon in file manager

Answer - Yes/see code. Note - If using via file manager they will be local only. You must host them publicly to use cloud dashboards access. Change the 'url' accordingly.

Code to make the magic happen - change tile # to target the tile your working on.


#tile-0 .tile-primary i.material-icons:before{
  content: "";
  background-image:url("http://YOUR_HUBS_IP/local/YOUR_ICON_FILE.svg");
  background-size: 100% 100%;
  display: inline-block;

  /*size of your icon image*/
  height: 52px;
  width:52px;

  /*if you want to change the position*/
  position:relative;
  top:5px;
  left: 0px;
}

This can also be done if you convert you SVG to base64 replace the above with

thanks @samplesl and @adamkempenich for the assists details here

background-image: url([base 64 image here]);

For devices with multiple states add .'state' to the .tile-primary

Example

#tile-0 .tile-primary.on i.material-icons:before

#tile-0 .tile-primary.off i.material-icons:before

As always if any HE'ers need custom icon post a request here.

15 Likes
2

Nice work Brother

1 Like
3

Is there any way to introduce text alongside the icon? E.g. to the right?

4

Figured it out...

    #tile-3 .tile-primary:after{
  font-size: 25px;
   content: "TV Light";

position:relative;
Top:-20px;
left:-100px;
}
1 Like
5

For a noob. Where do I put the code? And do the icons have to be in svg format?
So I upload the icons to the hub using file manager so they are local

6

Sorry for the noob question.
Is there a way to have to custom icon scale instead of being a set size? I'd like to be able to use the same dashboard on a tablet and a phone.
/size of your icon image/
height: 100px;
width:100px;
works great on my tablet but is too crowded on the phone.
I tried changing the values to:
height: 100%
width: 100%
but the icon disappears.
Thanks for sharing your code

7

Bump...
I have these same questions.
Is all this info already published somewhere?
It's not obvious to me where this code gets entered, for instance.

8

On your dashboard, settings cog(upper right), advanced, CSS

There are several posts scattered about but check out this one:

1 Like
9

I can start a new topic if needed. I'm have a handful of images I uploaded to the file manager of Habitat. I'd like to have habitat host those images so they can be used by the dashboard both LAN and also with remote dashboard. I feel like this is simple and logical but doesn't seem to be supported easily for both use cases. Any tips?