Custom icons via file manager/hosted

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.

12 Likes

Nice work Brother

1 Like

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

Figured it out...

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

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

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

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

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.

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

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

1 Like