Implement some custom icons I've created?

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.

kongo09 · December 31, 2020, 12:04am

Most of the process described here seems clear. However one caveat and one question:

caveat: the generate.py file will fail for simple icons with just a simple path and no closing </path> tag.
what is unclear to me is the calculation of the bounding box. The generate.py file assumes a fixed size of 1024. What’s the logic here.

I have created a simple icon in Inkscape:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="24" height="23.398" version="1.1" viewBox="0 0 24 23.398" xmlns="http://www.w3.org/2000/svg">
 <g transform="matrix(.063563 0 0 .063563 5.2734 1.5259)">
  <path d="m105.83 344.11c-9.8023-44.193-19.605-88.387-29.407-132.58-40.663 19.891-81.327 39.782-121.99 59.673 28.441-35.22 56.882-70.44 85.323-105.66-40.907-19.391-81.813-38.781-122.72-58.172 45.267 0.27753 90.533 0.55506 135.8 0.83259-10.344-44.07-20.687-88.14-31.031-132.21 28.007 35.563 56.014 71.127 84.021 106.69 28.007-35.563 56.014-71.127 84.021-106.69-10.344 44.07-20.687 88.14-31.031 132.21 45.267-0.27753 90.533-0.55507 135.8-0.8326-40.907 19.391-81.813 38.781-122.72 58.172 28.441 35.22 56.882 70.44 85.323 105.66-40.663-19.891-81.327-39.782-121.99-59.673-9.7997 44.193-19.599 88.387-29.399 132.58z"/>
 </g>
</svg>

Size and viewbox are 24. I can load it successfully into HA with the custom_icons.js approach (thank you @wmaker for all the detailed descriptions). However, it’s size is far off. When I manipulate the viewbox to some large numbers I can get it to be displayed, but I have no idea how the correct viewbox is supposed to be calculated.

kongo09 · December 31, 2020, 11:32am

Finally I managed to get it working - without the generate.py script. The problem I had was an Inkscape transformation problem. For future reference, here is my workflow (mostly quoting @wmaker and https://github.com/Armaell/home-assistant-custom-icons-loader/issues/5#issuecomment-632975366):

Set the document size to 24x24 pixels in File->Document Properties->Custom Size
Set the viewbox Scale to 1 in File->Document Properties->Scale
Set the background to checkerboard to see transparency in File->Document Properties->Background
Create your icon in Inkscape inside the document (see also here https://github.com/Armaell/home-assistant-custom-icons-loader/issues/5#issuecomment-632975366)
Make sure everything is in one path using the options from the Path menu to do so. You can verify this in the Edit->XML Editor
Once all objects are paths, you then need to change the fill and stroke of each one to be ‘undefined’ Do this by selecting them all and going under Object->Fill and Stroke and set all fill and stroke to be undefined (the ? mark).
Select all objects again and go to Path->Combine. Now you should have one path that represents the whole icon.
Now comes the new bit: you need to transform the coordinates to be really in the 24x24 space, even if in theory a svg wouldn’t require this. There is an Inkscape extension to do this: Klowner/inkscape-applytransforms: An Inkscape extension which removes all matrix transforms by applying them recursively to shapes (github.com)
Install the extension (requires Inkscape restart) and run it under Extensions->Modify Path->Apply transform
Save the file as Optimized SVG
When you open it in a text editor, it should look like this:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="24" height="24" version="1.1" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
 <path d="m12 23.399c-0.6231-2.8091-1.2462-5.6182-1.8692-8.4272-2.5847 1.2643-5.1694 2.5286-7.7541 3.793 1.8078-2.2387 3.6156-4.4774 5.4234-6.7161-2.6002-1.2325-5.2003-2.465-7.8005-3.6976 2.8773 0.01764 5.7546 0.03528 8.6319 0.05292-0.65749-2.8012-1.3149-5.6024-1.9724-8.4037 1.7802 2.2605 3.5604 4.521 5.3406 6.7815 1.7802-2.2605 3.5604-4.521 5.3406-6.7815-0.6575 2.8012-1.3149 5.6024-1.9724 8.4037l8.6319-0.05292c-2.6002 1.2326-5.2003 2.4651-7.8005 3.6976 1.8078 2.2387 3.6156 4.4774 5.4234 6.7161-2.5847-1.2644-5.1694-2.5287-7.754-3.793-0.6229 2.809-1.2458 5.6181-1.8687 8.4272z"/>
</svg>

Note that width, height, and viewbox all reflect the 24x24 size. Also, there is only a single path with coordinates that don’t go beyond the 24x24 dimension
Now create a file called custom_icons.js as described in post Implement some custom icons I've created? and place it in your www directory
’ In the file, give your icon a name and in the var icons use the following for the five parameters:
The first four represent the viewbox numbers from your icon file, so in my case: 0, 0, 24, 24
The last one is the content form the <path d= tag from your icon. In my case this looks like:

var icons = {
  xmas_star: [0, 0, 24, 24, 'm12 23.399c-0.6231-2.8091-1.2462-5.6182-1.8692-8.4272-2.5847 1.2643-5.1694 2.5286-7.7541 3.793 1.8078-2.2387 3.6156-4.4774 5.4234-6.7161-2.6002-1.2325-5.2003-2.465-7.8005-3.6976 2.8773 0.01764 5.7546 0.03528 8.6319 0.05292-0.65749-2.8012-1.3149-5.6024-1.9724-8.4037 1.7802 2.2605 3.5604 4.521 5.3406 6.7815 1.7802-2.2605 3.5604-4.521 5.3406-6.7815-0.6575 2.8012-1.3149 5.6024-1.9724 8.4037l8.6319-0.05292c-2.6002 1.2326-5.2003 2.4651-7.8005 3.6976 1.8078 2.2387 3.6156 4.4774 5.4234 6.7161-2.5847-1.2644-5.1694-2.5287-7.754-3.793-0.6229 2.809-1.2458 5.6181-1.8687 8.4272z']
};

Now you go the the HA frontend into Configuration->Lovelace Dashboards->Resources and add your file as a Javascript resource, e.g. /local/custom_icons.js
Now restart HA
In the Javascript file I used this line:

window.customIconsets["custom"] = getIcon;

So I can reference the icon as custom:xmas_star
You might need to clean your browser cache during experimentation. In modern Edge this is in STRG-SHIFT-DEL where you can apply it specifically to the cashed data

Hope this helps.

One final note: when you test this with the HA mobile app, please make sure you clear the app cache from time to time. It seems to store old definitions and you might get missing icons or outdated results otherwise.

ymilord · March 23, 2021, 9:59am

Why is this complex to use a 3rd party SVG or a custom one as an icon?

kongo09 · April 2, 2021, 9:27pm

Using the method described above, I have now started to put my icons into a github repository suitable for HACS. This allows me to install the stuff as a custom frontend plugin, which makes handling much easier. When I want to add an icon, I can now simply change my files locally, push them to github and in HACS I can run an update on my plugin:

kongo09/hass-kongo09-icons: Personal icon set for Home Assistant (github.com)

M0E-lnx · May 4, 2021, 8:42pm

Make one for recessed lighting please.