Implement some custom icons I've created?

Configuration
51

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.

52

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.

3 Likes
54

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

1 Like
55

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)

56

Make one for recessed lighting please.

57

Do you have an example / sketch?

58

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

59

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

60

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.

1 Like
61

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

62

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:
StanBlack
Can anyone help me get this working?

1 Like
63

So what exactly is going wrong?

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

image
image600×600 7.76 KB

64

Thanks for the reply…

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

65

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.

66

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

67

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.

68

Thomas can you use SVG files in HA? I have a ton of them I made up in Fontastic but did not think we could use them. I am guessing you have to use customize for each one you want to change. Too bad since it makes four nice packages of .eot, .svg, .ttf, and .woff of all the icons. It gives you a styles.css file to integrate it in.

69

Not sure if it fits your use case but hass-fontawesome allows you to use single, custom to your instance, .svg files as icons.

For example:

apro:lamp

will get the icon in the file <Home Assistant Config>/custom_icons/lamp.svg.

70

Yeah someone else just point that out too. Thanks for the assist!

71

for hours i have been trying different ways to use my own icons.
However, with every integration / variant without success.

It just doesn’t show any new icons.
Tried different browsers, deleted cache, restarted HA …
Even if I “duplicate” an existing icon from the code and change the name, it is not displayed to me.

did I forget something?