Implement some custom icons I've created?

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.

kongo09 · May 10, 2021, 9:24am

Do you have an example / sketch?

M0E-lnx · May 10, 2021, 3:20pm

Maybe a representation of one of these.

You can see one represented on the MyLeviton app here https://is5-ssl.mzstatic.com/image/thumb/PurpleSource114/v4/ab/8f/aa/ab8faacb-a36c-9b8b-576d-482a8c0d6d63/cabe46b4-7dce-4a2b-ae83-3a027d06985e_1_MyLeviton_1242x2208.jpg/392x696bb.jpg

kongo09 · May 10, 2021, 4:52pm

Hm, doesn’t really look close to material design. Let me think about it…

M0E-lnx · May 10, 2021, 5:17pm

From what I’ve read somewhere else, MDI guidelines do not allow the ‘perspective’ representation that these will probably need, so they will not accept anything similar to this from anyone. The closest thing I have found so far is mdi:circle-slice-8, but it just looks a little too flat.

kongo09 · May 10, 2021, 9:33pm

Please open a feature request here and I’ll see what I can do when I find time.

codowd · May 29, 2021, 10:55am

Ok, it’s taken 3 days and I have followed your instructions meticulously, several times, to no avail. It shouldn’t be this hard to get a f***ing custom icon working. What the hell? HA is usually so flexible, but seriously I just want to display an SVG in a box on the screen…?

As near as I understand the SVG format, which is not much, it seems to have scaled the co-ordinates into the 24x24 format. Here’s the data I have in my Java Script file (the icon is named “stan”):

“stan”:
“m 2.9257812,7.53125 c -0.1888321,0.00653 -0.3756443,0.025564 -0.5527343,0.058594 -1.64086009,0.3067 -2.52551128,1.5385329 -2.26953128,3.1640622 0.15807,1.00681 0.61361556,1.407698 2.19726558,1.929688 1.0363001,0.34091 1.1168213,0.389873 1.1132813,0.683594 -0.005,0.48601 -0.5922187,0.621407 -1.4492187,0.335937 -0.3851501,-0.12799 -1.0339463,-0.469117 -1.1289063,-0.591797 -0.0484,-0.0631 -0.16804,-0.02511 -0.1875,0.05859 -0.0189,0.079 -0.088135,0.368949 -0.171875,0.724609 -0.0879,0.36981 -0.14259875,0.60542 -0.19921875,0.84961 -0.0301,0.12976 -0.0703438,0.289418 -0.0898438,0.355468 -0.0478,0.16397 -0.0140562,0.209535 0.24609375,0.333985 1.66800005,0.79743 3.46784995,0.729324 4.43750005,-0.166016 0.29903,-0.27662 0.4508068,-0.50164 0.6855468,-1.02539 0.0743,-0.16692 0.1269532,-0.138651 0.1269532,0.06836 0,0.28783 0.2784643,0.867097 0.5527343,1.148437 0.38573,0.39576 0.6995688,0.507996 1.4179688,0.509766 0.926,0.002 1.6479019,-0.225446 2.2949219,-0.722656 0.1745802,-0.13389 0.2146512,-0.133488 0.3320312,0.0078 0.77501,0.92718 2.130193,0.968481 2.945312,0.08789 l 0.160157,-0.173828 0.05469,0.05664 c 0.0289,0.0307 0.05274,0.06648 0.05274,0.08008 0,0.0767 0.2659,0.369619 0.43164,0.474609 0.34504,0.21941 1.08817,0.26836 1.81836,0.119141 0.3008,-0.0613 0.366537,-0.06767 0.435547,-0.04297 0.161609,0.0584 2.156087,0.03862 2.210937,-0.02149 0.0425,-0.0472 0.04355,-0.13682 0.03125,-1.875 -0.0153,-2.06376 -0.03118,-1.896515 0.189453,-2.009765 0.35507,-0.18225 0.740439,-0.05635 0.886719,0.291015 l 0.05664,0.136719 0.0059,1.71875 c 0.004,1.2162 0.01576,1.730306 0.03516,1.753906 0.0436,0.0525 2.194489,0.03678 2.230469,-0.01563 0.056,-0.0814 0.0095,-4.13137 -0.05078,-4.5 -0.1162,-0.70188 -0.328911,-1.135195 -0.744141,-1.5156246 -0.58214,-0.5332 -1.740696,-0.5250619 -2.384766,0.017578 -0.18226,0.15335 -0.231832,0.1449275 -0.232422,-0.039063 0,-0.082 -0.0085,-0.172455 -0.01953,-0.203125 L 18.375,9.5371094 h -1.087891 c -1.05105,0 -1.090464,0.00303 -1.115234,0.048828 -0.0171,0.0318 -0.02539,0.7104665 -0.02539,2.0292965 0,2.21121 0.01277,2.049215 -0.171875,2.109375 -0.19464,0.0637 -0.311513,0.02989 -0.402343,-0.115234 l -0.05859,-0.0918 -0.0059,-1.958984 c -0.004,-1.07759 -0.01168,-1.9731346 -0.01758,-1.9902346 -0.0165,-0.0437 -2.171203,-0.045753 -2.214843,-0.00195 -0.0183,0.0183 -0.0293,0.1056832 -0.0293,0.2207032 0,0.2730796 -0.03419,0.2921736 -0.207032,0.1152344 -1.06461,-1.0899801 -2.918876,-0.2770689 -3.4042964,1.4941402 -0.13507,0.49308 -0.1643881,0.704095 -0.1738281,1.240235 -0.0106,0.62757 6e-5,0.588257 -0.1875,0.710937 -0.57919,0.37984 -1.1366281,0.413472 -1.3300781,0.08203 l -0.064453,-0.111329 -0.00781,-0.830078 c -0.004,-0.51785 0.00383,-0.844187 0.019531,-0.867187 0.0206,-0.0318 0.1335381,-0.03742 0.7363281,-0.04102 0.65351,-0.003 0.7146506,-0.008 0.7441407,-0.04883 0.0419,-0.0566 0.047259,-1.8686325 0.00586,-1.9453125 -0.0242,-0.0454 -0.058434,-0.048828 -0.7402343,-0.048828 -0.5656301,0 -0.7203676,-0.0072 -0.7421876,-0.033203 -0.0183,-0.0224 -0.030456,-0.2739487 -0.035156,-0.7617187 l -0.00586,-0.7285156 -1.1015625,-0.00781 c -1.00622,-0.006 -1.1070456,-0.00224 -1.1347656,0.035156 -0.0236,0.0318 -0.026072,0.4866937 -0.013672,2.0644534 0.0177,2.28906 0.013539,2.329191 -0.1503906,1.988281 -0.18284,-0.38161 -0.8351675,-0.897269 -1.3984375,-1.105469 -0.0507,-0.0189 -0.1549688,-0.05704 -0.2304687,-0.08594 -0.0749,-0.0289 -0.2512113,-0.09727 -0.3945313,-0.150391 -0.14333,-0.0525 -0.3399969,-0.126129 -0.4355469,-0.162109 -0.0956,-0.036 -0.200165,-0.07339 -0.234375,-0.08399 C 2.2206756,10.340709 2.1716944,9.8438 2.6777344,9.6875 c 0.44177,-0.13625 1.6054006,0.1929755 2.1503906,0.609375 0.0602,0.046 0.1367087,0.08624 0.1679688,0.08984 l 0.056641,0.0059 0.00586,-1.1679686 0.00586,-1.1699219 -0.068359,-0.048828 C 4.9270938,7.9569594 4.8531581,7.9219869 4.5800781,7.8105469 4.0877331,7.6092769 3.4922778,7.5116487 2.9257812,7.53125 Z m 9.5332028,4.201172 c 0.110498,-0.01022 0.231129,9.82e-4 0.361328,0.03711 0.435281,0.12032 0.434296,0.120377 0.416016,0.972657 -0.0177,0.80333 0.009,0.707215 -0.232422,0.828124 -0.75614,0.37689 -1.410918,-0.255162 -1.205078,-1.164062 0.09246,-0.409627 0.328665,-0.643168 0.660156,-0.673828 z m 10.56836,1.964844 c -0.104166,0.0037 -0.20796,0.02228 -0.304688,0.05664 -0.24183,0.0861 -0.420105,0.263989 -0.541015,0.542969 -0.0844,0.19641 -0.06696,0.858878 0.02734,1.054687 0.34327,0.71191 1.41672,0.706968 1.75586,-0.0078 0.17282,-0.36392 0.104511,-1.019879 -0.136719,-1.324219 -0.169425,-0.21366 -0.488283,-0.333379 -0.800781,-0.322265 z”

It should look like this:

Can anyone help me get this working?

kongo09 · May 29, 2021, 11:19am

So what exactly is going wrong?

The SVG code seems right, I can see it in Inkscape and it fits the box well.

codowd · May 29, 2021, 12:06pm

Thanks for the reply…

I update the js file, do a “ha core restart” and the damn icon is still blank…

gonzotek · May 29, 2021, 3:04pm

Possibly browser caching issue? Try clearing your cache, and/or appending a cache-busting string to the resource url, e.g.:

frontend:
  extra_module_url:
    - /local/hass-kongo09-icons.js?cache_bust=1234567890

or

resources:
  - type: js
    url: /local/hass-kongo09-icons.js?cache_bust=1234567890

if you’re doing it in the lovelace config.

The important thing is that the string after the question mark be unique each time you edit your file…I usually just increment by one: 12344, 12345, 12346…As long as it’s unique, the browser treats it like a new file and downloads it anew.

codowd · May 30, 2021, 8:20am

Thank you, that was it! That’s a good trick to refresh the cache…

kbrown01 · August 6, 2021, 4:05pm

It is unfortunate that icons are believed to be a simple path and a viewBox. This eliminates many of the above methods from using things like animation. Say I have the fan icon and add a simple animation to make it spin based on speed, one cannot use the path/viewBox method or even CSS mods to set speed.