Implement some custom icons I've created?

jono · March 27, 2017, 8:25am

Thanks, I’ll do the same once I’ve made some more

matthewcky2k · June 15, 2017, 9:30am

Where these icons uploaded to mdi? I cannot download them using the link (account limit reached)

jono · June 15, 2017, 3:56pm

No, I’ve been busy with work lately.

I’ll get them finished and submitted in the next few days

jono · July 4, 2017, 1:43pm

…OK, I’ve finally submitted these to MDI

Fingers crossed they get approved

Birdbrainuk · January 7, 2018, 9:37am

Loving the new icons but can you help with where to put the files. Quite new to HA but learning by example. I am using Hassio and samba share to access the config files. Can I create a file in the config directory for my icons and if so what would the directory path be for the icon.

jono · January 21, 2018, 2:19pm

Create a folder called www (if there isn’t already one there), and put the icons in there.

Then in your configuration.yaml, under customize it would look something like this:

customize:
  switch.my_light_switch:
    friendly_name: "My Light"
    entity_picture: /local/my_light_icon.png

RandyA · April 3, 2019, 9:19pm

I can here for the icon discussion… but then noticed you have Plex, netflix, and amazon video automations (or scripts)… Do these turn on a smart tv and launch that app? I looked awhile back at doing that and didn’t think it was possible (on my tv at least). Can you share that code?

jono · April 4, 2019, 3:24pm

I have a Harmony Hub, and use this with scripts to turn on the TV, change channels, switch to Apple TV, start Plex etc.

I don’t know about controlling a smart TV directly (without a Harmony or Broadlink Hub), I guess you’d have to see if there was a component that can control your TV, or buy a hub to control it

thomasloven · May 21, 2019, 7:48am

Hey.
I just got linked this topic.

Here’s an example of a small custom iconset made from svgs. https://github.com/hulkhaugen/hass-bha-icons

hijinx · May 21, 2019, 7:58am

Thanks @thomasloven

wmaker · September 17, 2019, 8:04pm

Hi all,
Earlier in this thread, it was mentioned that there was an Icon pack from Philips for their Hue.
A few of them looked interesting enough with my existing Philips Hue devices that I wanted to see if it was possible to incorporate them into my Home Assistant (Lovelace). Thanks to @thomasloven who had done work making fontawesome available to Home Assistant, I managed to borrow/tweak some of his work to do the same for these Philips Hue Icons.
I stripped any fill pre-defines so that the icon’s color is driven by HA and I stripped any stroke definitions so hopefully the Icon will still render nicely. I’ve only tried this on a few icons so I can’t say that all will work.

Here is what I did:

Establish a developer account at Philips Hue in order to get the Hue Icon Pack. These are located at: https://developers.meethue.com/develop/application-design-guidance/icon-pack/
Note the “Note” at the bottom of the page for allowed usage.
Download the zip file and unzip into the directory HueIconPack2019.
Make a temporary directory and place the svg files you like from the HueIconPack2019 into that directory. You can view an svg file from your browser to see what the icon looks like. I didn’t want all the Icons, and I didn’t want a large html file (see below), so I selectively choose only a few svg files of interest.
Copy the generate.py file below into that same temporary directory with the selected svg files and simply run it as a python script (ex $ python3 generate.py).
This will read those svg files and should generate a file hass-HueIconPack.html
Place hass-HueIconPack.html somewhere under your <ha-config>/www/ folder. (ex. <ha-config>/www/icons/hass-HueIconPack.html )
Within your configuration.yaml add the url pointing to your hass-HueIconPack.html to the frontend.

Example:

frontend:
  extra_html_url:
    - /local/icons/philips_hue/hass-HueIconPack.html

After rebooting HA, you can reference the icons as:
phu:<svgfilename> (without the .svg extension).
Example: phu:heroesBloom which was derived from heroesBloom.svg .

Here is the python code generate.py:

import os

ICON_SIZE = 1024

def make_file(directory, name, out):
    out.write('<ha-iconset-svg name="{}" size="{}"><svg><defs>\n'.format(name, ICON_SIZE))
    for f in os.listdir(directory):
        if not f.endswith('.svg'):
            continue
        with open(os.path.join(directory, f), 'r') as fp:
            name = os.path.splitext(f)[0]
            data = fp.read()
            size_start = data.find('viewBox="')+len('viewBox="')
            size_end = data[size_start:].find('"')
            size = data[size_start:size_start+size_end].split(' ')
            width = float(size[2])
            height = float(size[3])
            scale = max(width, height)/ICON_SIZE
            start = data.find('<path')
            end = data.find('</path')
            out.write('<g id="{0}" transform="scale({1} {1})">'.format(name, 1/scale) + data[start:end+8] + '</g>\n')
    out.write('</defs></svg></ha-iconset-svg>')


with open("hass-HueIconPack.html", 'w') as out:
    make_file('.', 'phu', out)

Hope you enjoy.

mbriacuni · September 21, 2019, 9:38am

Hi, how should I do to create an iconset like this? I tried using the “generate.py” script with my svgs created on illustrator but it doesn’t put vectors in html.

VDRainer · September 26, 2019, 2:15pm

It was a lot of fiddling for creating my first svg’s , but here are my icons for open/closed windows.
The WildWest windows from mdi bite me, every time i see them.

hass-MyIconPack.html

<ha-iconset-svg name="mip" size="24"><svg><defs>
<g id="window-closed"><path
     id="path4530"
     style="fill:none;stroke:currentcolor;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
     d="m 5,11 h 14 m -7,9 V 4 M 5,3 H 19 M 20,2 V 20 M 4,2 v 18 m -2,1 h 20" /></g>
<g id="window-open"><path
     id="path4577-6"
     style="fill:none;stroke:currentcolor;stroke-width:2;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1;stroke-miterlimit:4;stroke-dasharray:none"
     d="m 17,11 c 2,0 2,0 2,0 M 5,11 c 2,0 2,0 2,0 m 0,9 V 4 M 17,20 V 4 M 5,3 H 19 M 20,2 V 20 M 4,2 v 18 m -2,1 h 20" /></g>

EDIT: Should go into mdi, i think.

mdezzi · October 15, 2019, 10:46pm

@wmaker This python script worked perfectly! I just dumped it in the folder with all the Hue icons and loaded all of them into HA to give me a large list to choose from. Thanks a TON!

Moso · October 17, 2019, 7:58am

@wmaker, dude thanks a mill, you rock! The python script didn’t work but, with your clear steps and the example of @VDRainer i now totally understand how it works and have my first custom set of entities that exactly look-a-like the linked device.

So again, THANKS @wmaker & @VDRainer

dvbit · January 25, 2020, 11:47pm

Check out projectnoun for icons

autdaf · February 10, 2020, 2:43pm

Can anyone help me understand why when I run generate.py, the output doesn’t show what others are seeing?

<ha-iconset-svg name="csi" size="1024"><svg><defs>
<g id="globe-lamp" transform="scale(42.666666666666664 42.666666666666664)"></g>
</defs></svg></ha-iconset-svg>

EDIT: I actually got it working by copying the dimensions from the svg file itself, in case anyone is wondering. Also if you have this FADO lamp from IKEA, here’s an icon for it

<ha-iconset-svg name="csi" size="1024"><svg><defs>
<g id="globe-lamp" transform="scale(42.666666666666664 42.666666666666664)"><path
	id="path5555"
	d="M19.8,18.2c1.3-1.7,2.2-3.8,2.2-6.2c0-5.5-4.5-10-10-10S2,6.5,2,12c0,2.3,0.8,4.5,2.2,6.2H19.8z" /><rect
	x="5.4" y="19.8" width="13.2" height="2.2" /></g>
</defs></svg></ha-iconset-svg>

mdezzi · February 11, 2020, 2:39pm

Hi Everyone, the generate.py worked pretty well for me for the Hue icons posted above, but for other icons (i.e. from flaticon or projectnoun) i’ve had more success with this integration via HACS.

Make sure to look at my post in the issues section because the instructions listed in the readme are not very good. I’ve successfully loaded all the Hue icons this way, as well as a few from projectnoun.

wmaker · May 25, 2020, 10:33pm

Earlier in this thread I discussed a way, using a python script, to incorporate the Philips Hue Icons into an HTML format usable by HA. Starting 0.110.x, the method to load these icons using HTML is no longer possible, so that script is no longer usable.

I haven’t fixed the script, but I will however show a way one can manually convert the HTML file to a javascript file.
(I borrowed and modified this javascript file from jncanches posted here )

Name the file something like: hass-HueIconPack.js
and place it at HA_CONFIG_DIR/www/YOUR_PATH/hass-my_icons.js

The file example:

 var icons = {
        "heroesBloom": [0, 0, 31.03030303030303, 31.03030303030303, "M25.6928374,...."],
        "bulbFlood": [0, 0, 32.0, 32.0, "M8.1699,10.0847......"]

};


async function getIcon(name) {
    var svgDef = icons[name];
    var primaryPath = svgDef[4];
  return {
    path: primaryPath,
        viewBox:  svgDef[0] +" " + svgDef[1] + " " + svgDef[2] + " " + svgDef[3]
  };
}
window.customIconsets = window.customIconsets || {};
window.customIconsets["phu"] = getIcon;

For example, from the html file generated earlier say for heroesBloom:

the numbers in the javascript file: 31.03030303030303 31.03030303030303 come from the html file parameters transform="scale(31.03030303030303 31.03030303030303)
The string in the javascript file "M25.6928374,...." comes from the html file parameter: <path d="M25.6928374,...."

In the main configuration.yaml file add the following:

frontend:
  extra_module_url:
    - /local/YOUR_PATH/hass-my_icons.js

The icon configuration itself in yaml remains the same, for example: icon: phu:heroesBloom

Jimmy_Berglund · December 1, 2020, 1:51am

Thx Man! works perfekt.

What i first missunderstood was that i thought you had to move over the html part.
So if anyone is thinking like that then just follow these instruktion Wmaker did and it will work.