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.

7 Likes

Nice work Brother

1 Like