Create icon but it does not show

[jbrandek]

Thank you for this, i would like tu use a icon that i created but i cant show it in HA, i made all the steps on inkskape cuan you check the svg code to see what im doing wrong? i compare all and it looks good but cant fint the problem taht is not showing it

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   version="1.1"
   id="svg4553"
   width="24"
   height="24"
   viewBox="0 0 24 24"
   sodipodi:docname="770_icon.svg"
   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <defs
     id="defs4557" />
  <sodipodi:namedview
     id="namedview4555"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageshadow="2"
     inkscape:pageopacity="0.0"
     inkscape:pagecheckerboard="0"
     showgrid="false"
     inkscape:zoom="16.503597"
     inkscape:cx="17.11748"
     inkscape:cy="6.4531386"
     inkscape:window-width="1920"
     inkscape:window-height="1009"
     inkscape:window-x="-8"
     inkscape:window-y="-8"
     inkscape:window-maximized="1"
     inkscape:current-layer="svg4553" />
  <path
     style="fill:#000000;stroke-width:0.0862523"
     d="m 0.02702785,20.416978 0.0270279,-0.28032 0.75470764,-0.02492 0.75470771,-0.02492 v -0.977982 c 0,-0.749729 0.02923,-1.002241 0.1252394,-1.081921 0.1639132,-0.136037 0.4555124,-0.03932 0.5230532,0.173481 0.044259,0.139447 0.133202,0.168092 0.5219258,0.168092 H 3.2022649 V 13.368731 8.3689762 L 3.5904002,7.9319565 3.9785356,7.4949369 V 6.4369125 c 0,-1.0893832 0.049878,-1.2650298 0.3592251,-1.2650298 0.2112534,0 0.3307935,0.26289 0.3307935,0.7274743 0,0.6324117 0.2177936,0.534269 1.1410817,-0.5141976 0.6565835,-0.7456022 0.8377822,-0.9037255 1.0131038,-0.8840862 0.1512254,0.01694 0.4279961,0.2809548 0.9487754,0.9050469 l 0.7352667,0.8811297 1.5698012,0.00296 1.569799,0.00296 0.02587,-0.4870228 c 0.02898,-0.5456175 0.201749,-0.7555866 0.478691,-0.5817619 0.108605,0.068166 0.158197,0.2313434 0.176809,0.5817619 l 0.02587,0.4870228 h 1.575779 1.575781 l 0.795287,-0.9056492 c 0.580288,-0.6608135 0.849336,-0.9056492 0.995212,-0.9056492 0.148649,0 0.392696,0.2322759 0.951544,0.9056492 0.636098,0.766454 0.789803,0.9056492 1.000059,0.9056492 0.244464,0 0.24885,-0.00861 0.274117,-0.5382107 0.02088,-0.4375336 0.05469,-0.5437385 0.180765,-0.5677622 0.347542,-0.066225 0.405554,0.1195364 0.405554,1.2986316 v 1.1203118 l 0.34501,0.4120756 0.345009,0.4120757 v 4.9691004 4.969101 h 0.517514 c 0.453997,0 0.517514,-0.02046 0.517514,-0.166692 0,-0.204637 0.307337,-0.316956 0.478526,-0.174882 0.09601,0.07968 0.12524,0.332193 0.12524,1.081922 v 0.977982 l 0.754707,0.02492 0.754708,0.02492 0.02703,0.28032 0.02703,0.28032 h -12 H 0 Z M 21.832763,19.576018 V 19.058504 H 12.043126 2.2534896 v 0.517514 0.517514 h 9.7896364 9.789637 z M 9.6711881,13.545104 V 8.7217226 L 8.2695879,7.0366066 C 7.498708,6.1097928 6.8421964,5.3498924 6.8106733,5.347939 6.7791502,5.3459853 6.0902099,6.0997153 5.2796949,7.022894 L 3.806031,8.7014007 v 4.8335423 4.833542 h 2.9325785 2.9325786 z m -4.9853835,4.116112 c -0.1268109,-0.12681 -0.1438266,-2.804234 -0.019076,-3.00158 0.1221647,-0.193255 4.0215969,-0.193255 4.1437612,0 0.1247511,0.197346 0.1077352,2.87477 -0.019075,3.00158 -0.1468282,0.146829 -3.958782,0.146829 -4.1056102,0 z M 8.2048987,16.169052 V 15.17715 H 6.7386095 5.2723203 v 0.991902 0.991901 H 6.7386095 8.2048987 Z M 5.2033185,13.779863 c -0.1434058,-0.143406 -0.1434058,-2.237158 0,-2.380564 0.1268109,-0.126811 2.8042339,-0.143826 3.0015802,-0.01908 0.1042346,0.06589 0.1293785,0.300922 0.1293785,1.209358 0,0.908435 -0.025144,1.143466 -0.1293785,1.209357 -0.1973463,0.124751 -2.8747693,0.107736 -3.0015802,-0.01907 z M 7.6873849,12.589581 V 11.985815 H 6.6954834 5.7035818 v 0.603766 0.603766 H 6.6954834 7.6873849 Z M 5.1939809,10.658439 C 5.1272477,10.57803 5.1024862,10.17359 5.1187306,9.4293434 l 0.024211,-1.1092515 1.5461829,-0.023615 c 1.1792661,-0.018011 1.5627295,0.00246 1.61591,0.086252 C 8.4197624,8.5635031 8.3926975,10.555983 8.2739005,10.67478 8.114874,10.833806 5.3272484,10.819016 5.1939809,10.65844 Z M 7.6873849,9.484498 V 8.8807319 H 6.7386095 5.7898341 v 0.6037661 0.603766 h 0.9487754 0.9487754 z m 3.2110361,7.223631 0.02343,-1.660357 h 1.078153 1.078153 l 0.02343,1.660357 0.02343,1.660356 h 0.256894 0.256894 l -0.0043,-4.851692 -0.0043,-4.8516919 -0.820587,-0.862523 -0.820587,-0.8625231 -0.857002,0.9056492 -0.857003,0.9056492 -7.5e-5,4.8085656 -8.1e-5,4.808566 h 0.300021 0.30002 z m 0.459543,-2.357842 C 10.841879,13.834202 10.792468,13.694591 10.792468,12.752463 V 11.853474 L 11.187292,11.40213 C 11.56157,10.974275 11.603863,10.950787 12,10.950787 c 0.396137,0 0.43843,0.02349 0.812708,0.451343 l 0.394824,0.451344 v 0.925692 c 0,0.919771 -0.0018,0.927781 -0.280173,1.25214 -0.386506,0.450341 -0.392062,0.45302 -0.942761,0.454505 -0.333658,8.97e-4 -0.533411,-0.0423 -0.626634,-0.135524 z m 1.067037,-0.780436 c 0.277265,-0.352485 0.254628,-1.25266 -0.04125,-1.640584 -0.27957,-0.366535 -0.477748,-0.36454 -0.761644,0.0077 -0.18955,0.248513 -0.225868,0.385329 -0.225868,0.850891 0,0.666837 0.204858,1.009288 0.603766,1.009288 0.16328,0 0.306461,-0.07656 0.425001,-0.227262 z m -1.403785,-3.159446 c -0.127403,-0.09316 -0.145584,-0.235089 -0.1243,-0.9703385 l 0.02493,-0.8612177 h 1.078153 1.078153 l 0.02493,0.8612177 c 0.03118,1.0772425 0.02892,1.0794595 -1.103084,1.0794595 -0.532795,0 -0.882937,-0.03904 -0.978784,-0.109121 z M 12.517513,9.5276242 V 9.2257411 H 12 11.482487 V 9.5276242 9.8295073 H 12 12.517513 Z m 0,7.4608248 V 15.608412 H 12 11.482487 v 1.380037 1.380036 H 12 12.517513 Z M 20.10622,13.516793 20.10472,8.6651011 18.716051,7.0009328 C 17.952282,6.0856403 17.29578,5.3481831 17.257156,5.362139 17.218536,5.376095 16.544764,6.1249707 15.759889,7.0263073 l -1.427045,1.6387938 -0.002,4.8516919 -0.002,4.851692 h 2.889452 2.889453 l -0.0015,-4.851692 z m -4.942112,4.191949 c -0.03246,-0.03246 -0.05903,-0.730428 -0.05903,-1.551031 0,-1.386827 0.01176,-1.4983 0.166834,-1.581293 0.253006,-0.135405 3.7277,-0.11861 3.915793,0.01893 0.131713,0.09631 0.145385,0.274195 0.1243,1.617231 l -0.02369,1.509017 -2.032593,0.02309 c -1.117926,0.0127 -2.059155,-0.0035 -2.091618,-0.03594 z m 3.563571,-1.53969 V 15.17715 h -1.509415 -1.509415 v 0.991902 0.991901 h 1.509415 1.509415 z m -3.055795,-2.421226 c -0.197742,-0.197742 -0.197742,-2.118748 0,-2.31649 0.111553,-0.111554 0.372034,-0.135539 1.471959,-0.135539 0.756284,0 1.408843,0.03876 1.503254,0.08929 0.151568,0.08112 0.166835,0.190035 0.166835,1.190281 0,0.741326 -0.03381,1.134807 -0.103503,1.204498 -0.072,0.072 -0.529562,0.103503 -1.503254,0.103503 -1.157499,0 -1.42321,-0.02346 -1.535291,-0.13554 z m 2.452029,-1.158245 v -0.603766 h -0.948775 -0.948775 v 0.603766 0.603766 h 0.948775 0.948775 z m -2.396109,-1.88401 c -0.08282,-0.05255 -0.10438,-0.35949 -0.08625,-1.2277745 l 0.02417,-1.1577046 h 1.552541 1.552542 l 0.02417,1.1577046 c 0.01813,0.8682845 -0.0034,1.1752215 -0.08625,1.2277745 -0.06073,0.03854 -0.73144,0.07007 -1.49046,0.07007 -0.75902,0 -1.429727,-0.03153 -1.49046,-0.07007 z M 18.210166,9.484498 V 8.8807319 h -0.991902 -0.991901 v 0.6037661 0.603766 h 0.991901 0.991902 z M 10.524972,7.4791319 10.989995,6.9831811 h -0.92325 c -0.715358,0 -0.9087875,0.024277 -0.8590164,0.1078154 0.1379942,0.2316179 0.7554902,0.9301074 0.8024884,0.9077468 0.02735,-0.013013 0.258992,-0.2468385 0.514755,-0.5196114 z m 3.936334,0.021563 0.419402,-0.4743877 -0.494728,-0.025961 c -0.2721,-0.014279 -0.693692,-0.014279 -0.936871,0 l -0.442142,0.025961 0.45696,0.4992488 c 0.251329,0.2745868 0.48419,0.4880613 0.517468,0.4743877 0.03328,-0.013674 0.249239,-0.2383356 0.479911,-0.4992488 z"
     id="path4730" />
</svg>

[jbrandek]

svg file

[jbrandek]

Sorry its working dont know why but it didnt update the resources... needed to do in manually and now its working

[drawbars37]

I had just finished reviewing your SVG, and I couldn't find anything wrong. I was starting to list the 'other' things that could be wrong. It looks like you might have beat me to the solution! :)

I think you've stumbled over the first ambiguity in my DIY instructions. If a cache-based browser like Chrome, Edge, etc. is used to view HASS, new icons will not show up unless the user cache is cleared -- sometimes, even with a brand new icon file. I've become used to clearing the Browsing Data in Google Chrome every time that I add icons. I will add a note to the instructions to clarify this.

If you add more icons in the future, always manually clear the browser's cache.

Regards, -BW

[jbrandek]

Dont think is that, i added some icons and i cant made it show it until i change manually the version of the .js in resources and it showed the icon... i think somehow HA keeps track of changes into the js file... i changed in manage resources manually /local/baw_icons/hass-baw-icons.js?v=1.0 for /local/baw_icons/hass-baw-icons.js?v=1.1 and it worked...

[drawbars37]

That is strange! I have been editing my icon file for almost two years, and while the date code changes, I've never updated the version inside or outside the file. These are the actual lines from my configuration.yaml file. They have not changed since I started adding icons:

frontend: extra_module_url: - /local/hass-bha-icons.js - /local/hass-baw-icons.js - /local/hass-baw-logo-icons.js

[jbrandek]

What do you do after you edit the js? If you add an icon it apears to use ir right away?

[drawbars37]

The changes aren't 100% instantaneous, and you cannot edit and view results in real time. Here is what I do:

1. Edit the .js file on my PC.
2. Copy the new version of the .js to the /config/www folder on the HA server -- in my case, a Lenove microPC running HA x86. I do not change the name of the file. I do not edit configuration.yaml in any way.
3. Restart HA. (You must do this; the www files are only updated at each startup.)
4. While waiting for HA to restart, I close the browser I use to view Lovelace (Google Chrome), then reopen it. I clean the Browsing Data.
5. I re-access Home Assistant. The new icons should be available. (If something is wrong with the file, the icon will be blank.)

[jbrandek]

Ohh ok i will try that way, i was modifying the file in visual editor, not reuploading it, maybe thats why.

Thanks

[drawbars37]

Bear in mind that this is sort of a hack to HA: it's not an integration in the normal idea of the concept. It's a resource that gets loaded at the start of an HA session.

[drawbars37]

I would recommend that your remove the version info you had listed. I don't provide any, and if HA requires it the data is added during boot.