Icons not loading Home Assistant 0.110.0

SteveJohnSteele commented 4 years ago

After recent update to Home Assistant 0.110.0 Fontawesome icons are not displayed.

I have tried completely removing the integration. Restarting Home Assistant and Reinstalling Fontawesome ... the problem remains.

I read that Home Assistant has made changes to how icons are loaded. Now in blocks. Now in the database not DOM. I guess this might be the cause of the problems.

I look forward to seeing Fontawesome icons back again in Home Assistant.

yabbah commented 4 years ago

+1 Hope for a fix :)

Robvred commented 4 years ago

+1 Only far icon works for me

motherchaser commented 4 years ago

:) I’ve been having this same issue since .109

michaelarnauts commented 4 years ago

Please. Stop the useless +1 comments cluttering all subscribers mailboxes. Click the thumbs up icon at the first comment instead.

blazarmilkywayflybee commented 4 years ago

I was also having this issue.

Ended up manually uploading the latest version to the custom_components folder, rebooting and that did the trick :)

sstratoti commented 4 years ago

I think what @nedgeworth said did the trick for me. Inside of HACS I selected to show beta versions. Then selected the master branch to reinstall. The only other thing I did was go into the integrations setup under HomeAssistant - click the plus sign for a new integration, and then typed in "Font Awesome". Then selected all 3 icon sets.

Olen commented 4 years ago

Seems like the procedure suggested by @sstratoti works fine.

In HACS, find "Fontawesome" and click the three dots.
Select "Reinstall"
Enable Beta releases
Select "master" from the Version dropdown
Click "Install"
Do a "shift reload" in your browser or clear cache and reload to get the icons back (no need to reboot the server)

I did not have to do anythng in the integrations page.

motherchaser commented 4 years ago

Seems like the procedure suggested by @sstratoti works fine.

In HACS, find "Fontawesome" and click the three dots.

Select "Reinstall"

Enable Beta releases

Select "master" from the Version dropdown

Click "Install"

Do a "shift reload" in your browser or clear cache and reload to get the icons back (no need to reboot the server)

I did not have to do anything in the integrations page.

I followed the steps above and the only icon set that works for me is "fas". I have paid for the pro version and none of the other ones work as well.

I've tried troubleshooting this several ways and the issue has not been resolved.

kdoh82 commented 4 years ago

Thanks for the fix everyone. Was able to get it working with the method described by @Olen but it would appear the scaling is no longer working for the icon. I have "fab:fort-awesome" in a button card and no matter what I set the icon_height to it stays the same size but moves it up and down on the card. I previously had it set to auto scale which is the default and worked fine. Anyone else seeing the same thing?

motherchaser commented 4 years ago

Still having issues with some icons not showing up with a Pro License. Anyone been able to figure this out?

roopesh commented 4 years ago

I pulled the repo and applied the pro patch (with some tweaks - I think it needs updating). After rebuilding, removing, and re-adding the configuration, fas seems OK. Still unable to use fal icons.

carlos-sarmiento commented 4 years ago

I went trying to debug this a little and got the following error (using both the free and pro version).

Uncaught TypeError: Cannot read property 'cloneNode' of null
    at HTMLElement.<anonymous> (/fontawesome/data/fas.js:1)
    at HTMLElement._updateIcon (/frontend_latest/app.17c6ec83.js:915)
    at Object.I [as fn] (/frontend_latest/app.17c6ec83.js:2)
    at w (/frontend_latest/app.17c6ec83.js:2)
    at _ (/frontend_latest/app.17c6ec83.js:2)
    at HTMLElement._propertiesChanged (/frontend_latest/app.17c6ec83.js:2)
    at HTMLElement._flushProperties (/frontend_latest/app.17c6ec83.js:765)
    at HTMLElement._flushProperties (/frontend_latest/app.17c6ec83.js:2)
    at HTMLElement._invalidateProperties (/frontend_latest/app.17c6ec83.js:2)
    at HTMLElement._setProperty (/frontend_latest/app.17c6ec83.js:2)

This happens for most (though not all) icons. The code comes from a prettified version of the minimized code.

  a.applyIcon = function(c, h) {
            this.removeIcon(c);
            const l = document.createElementNS("http://www.w3.org/2000/svg", "svg")
              , a = this.querySelector(`[id='${h}']`).cloneNode(!0); // <-- Error happens here
            return l.appendChild(a),
            l.setAttribute("viewBox", a.getAttribute("viewBox") || "0 0 24 24"),
            l.style.cssText = "pointer-events: none; display: block; width: 100%; height: 100%;",
            c.shadowRoot.insertBefore(l, c.shadowRoot.childNodes[0]),
            c._svgIcon = l
        }

It seems that this does not contain most of the icons, even though the ha-iconset-svg element on the DOM does contains the icons my dashboard is looking for.

carlos-sarmiento commented 4 years ago

Also realized that the latest JS generated by the project is not correct according to the latest custom icon documentation:

https://developers.home-assistant.io/blog/2020/05/09/custom-iconsets/

michaelarnauts commented 4 years ago

I pulled the repo and applied the pro patch (with some tweaks - I think it needs updating). After rebuilding, removing, and re-adding the configuration, fas seems OK. Still unable to use fal icons.

I have updated the pro patch in https://github.com/thomasloven/hass-fontawesome/pull/21 but it hasn't been merged yet.

carlos-sarmiento commented 4 years ago

After trying for a while to get this repo to work I created my own version of the JS files using the latest API from home assistant and the issue was fixed. Here are my .js files for the free version.

https://gist.github.com/carlos-sarmiento/32adbc4609c3f7a930c979b9797740ec

I just install this extension and then replace the js files inside the custom_components folder

Robvred commented 4 years ago

After trying for a while to get this repo to work I created my own version of the JS files using the latest API from home assistant and the issue was fixed. Here are my .js files for the free version.

https://gist.github.com/carlos-sarmiento/32adbc4609c3f7a930c979b9797740ec

I just install this extension and then replace the js files inside the custom_components folder

Thanks for that @carlos-sarmiento ! I've an pro version of font-awasome, if you tell me how you did it, I will rebuild the js part with the pro version.

carlos-sarmiento commented 4 years ago

I wrote some code in C# to do it. I'll clean up the code over the weekend and share it

sheminasalam commented 4 years ago

the icons are now loading for me but the dimension of the icons are too small.. is there any fix for it?

motherchaser commented 4 years ago

Did anyone figure out how to get all of the Pro Icons to work?

shauder commented 4 years ago

@carlos-sarmiento any chance you can still share the C# code? I'd like to do the same for the pro icons.

roopesh commented 3 years ago

This is dead, right? Wondering if I should start removing Font Awesome icons from HA in the eventuality this is broken :(

carlos-sarmiento commented 3 years ago

Took me way more than a weekend, but finished my C# version of the generator. https://github.com/carlos-sarmiento/ha-fontawesome

carlos-sarmiento commented 3 years ago

I'm planning to integrate this repo's custom component into that project so everything can work from HACS

thomasloven commented 3 years ago

With the just released version 2.0.0, adding the pro icons has been significantly simplified. Try that!

motherchaser commented 3 years ago

I let my pro-license expire. Is it the same process as before when trying to use the wiki you had?

On Fri, May 14, 2021 at 2:27 PM Thomas Lovén @.***> wrote:

With the just released version 2.0.0, adding the pro icons has been significantly simplified. Try that!

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/thomasloven/hass-fontawesome/issues/20#issuecomment-841483652, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJE4ID2V4OVETXYEWGZCXSLTNWBT7ANCNFSM4NGLNG6A .

-- Regards,

-Chase Rothe

thomasloven commented 3 years ago

adding the pro icons has been significantly simplified.

Yes... it's exactly the same as before. Sure, why not?

motherchaser commented 3 years ago

Where are those instructions now. They AE not on your GitHub.

Thank you,

Chase Rothe

Sent from a mobile device. Erroneous words are a feature, not a typo.

On May 15, 2021, at 2:46 AM, Thomas Lovén @.***> wrote:

adding the pro icons has been significantly simplified.

Yes... it's exactly the same as before. Sure, why not?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

thomasloven commented 3 years ago

That's strange. They are there when I look. https://github.com/thomasloven/hass-fontawesome#using-with-custom-icons

motherchaser commented 3 years ago

Sorry If I wasn't clearer. The CLI instructional part from Basic to Pro when trying to Activate and execute the pro license patch on HA.

For example:

@fortawesome:registry=https://npm.fontawesome.com/ //npm.fontawesome.com/:_authToken=XXXXXXXXXXXXXXXXXXXXXXXXXXXX

I've activated it before but need to again cause I'm on a new HW install.

On Sun, May 16, 2021 at 1:26 PM Thomas Lovén @.***> wrote:

That's strange. They are there when I look. https://github.com/thomasloven/hass-fontawesome#using-with-custom-icons

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/thomasloven/hass-fontawesome/issues/20#issuecomment-841864982, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJE4ID5N6CJOY4ENN4AOM53TOAL43ANCNFSM4NGLNG6A .

-- Regards,

-Chase Rothe

thomasloven commented 3 years ago

adding the pro icons has been significantly simplified.

https://github.com/thomasloven/hass-fontawesome#using-with-custom-icons

That's the full instructions. Take your icons and place them in the right directory. Done!

shauder commented 3 years ago

Hey @thomasloven thanks for updating this. I had a suggestion with the new way you are loading in any custom svg. Would it be possible to split them into folders? I think there are names that overlap between the pro set types of font awesome. If they could be added into subfolders like <Home Assistant Config>/custom_icons/<sub_folder>/lamp.svg and then the name would be fapro:<sub_folder>_lamp.svg. I plan to do a mass rename myself but I think that would maybe make it easier for people to transition to this.

thomasloven commented 3 years ago

Try fapro:sub_folder/lamp

shauder commented 3 years ago

That worked, nice! Thank you.

motherchaser commented 3 years ago

Are you guys having issues with the icons not rendering correctly on the iOS Companion app?

On Mon, May 17, 2021 at 3:02 AM Shane A. Faulkner @.***> wrote:

That worked, nice! Thank you.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/thomasloven/hass-fontawesome/issues/20#issuecomment-842153574, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJE4ID4F5UELRYEHZVUAHETTODLTHANCNFSM4NGLNG6A .

-- Regards,

-Chase Rothe

shauder commented 3 years ago

I am not having any issue but I am on the latest where he has fixed some safari compatibility issues. Make sure to update to the latest and clear any cache.

Robvred commented 3 years ago

Are you guys having issues with the icons not rendering correctly on the iOS Companion app? …

That can be the case with complex SVG for example.

You can use https://jakearchibald.github.io/svgomg/ and select all options, particularly “replace W/H per view box” download minify svg and it will be good.

That’s been the case for mine, with icons below downloaded from flaticon, and now solved.

thomasloven commented 3 years ago

There were some issues with Safari (a.k.a. the Internet Explorer of modern browsers) and the iOS app since that uses Safari, but they should have been fixed with 2.1.2.

jensorium commented 3 years ago

Thx a lot for the Git I can use fas:heart (after I updatet to master) but not faspro:chef the file is: config/custom_icons/chef.svg, tried also to put it in the /www folder but this didnt help too, any ideas?

shauder commented 3 years ago

Where is the chef.svg from? This is using one from flaticon. I have it in this folder: hass-config/custom_icons/chef.svg

jensorium commented 3 years ago

Hey

i used the wrong term faspro not fapro! My mistake!

Thx for your reply

treecamp commented 3 years ago

Are you guys having issues with the icons not rendering correctly on the iOS Companion app? … On Mon, May 17, 2021 at 3:02 AM Shane A. Faulkner @.***> wrote: That worked, nice! Thank you. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#20 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJE4ID4F5UELRYEHZVUAHETTODLTHANCNFSM4NGLNG6A . -- Regards, -Chase Rothe

I still have this issue, icons are not loaded in the iOS companion app, but only when it's on the external URL, internal URL working just fine. Weird thing is that the icons are accessible on the external URL. I also tried to reinstall Font Awesome with beta enabled, and i tried to clear the cache of the app by entering the wrong internal and external URL, and then entering the correct one again, i read that that should clear the cache. Any one else has any ideas?

motherchaser commented 3 years ago

Kind of. The Duotone doesn’t work too well. Depending on the state I change the icons from Light to Duotone and if I toggle a light it shows both icons mixed together. If I use a Duotone on a tab in the dashboard it renders blank.

Do you need screen shots?

Thank you,

Chase Rothe

Sent from a mobile device. Erroneous words are a feature, not a typo.

On May 25, 2021, at 1:26 AM, treecamp @.***> wrote:

Are you guys having issues with the icons not rendering correctly on the iOS Companion app? … On Mon, May 17, 2021 at 3:02 AM Shane A. Faulkner @.***> wrote: That worked, nice! Thank you. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#20 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/AJE4ID4F5UELRYEHZVUAHETTODLTHANCNFSM4NGLNG6A . -- Regards, -Chase Rothe

I still have this issue, icons are not loaded in the iOS companion app, but only when it's on the external URL, internal URL working just fine. Weird thing is that the icons are accessible on the external URL. I also tried to reinstall Font Awesome with beta enabled, and i tried to clear the cache of the app by entering the wrong internal and external URL, and then entering the correct one again, i read that that should clear the cache. Any one else has any ideas?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

thomasloven commented 3 years ago

Please open a new issue for problems that are clearly unrelated to "Icons not loading in Home Assistant version 0.110.0".

thomasloven / hass-fontawesome

Icons not loading Home Assistant 0.110.0 #20