Hi et all, maybee a bug or I am missing something ...

I want to use my custom uploaded *.svg files (/custom_icons, fapro: prefix. E.g. fapro:tools-kitchen-scale).

This is what I see after I create a custom card:

... and normally it should look like that:

Any idea what is going wrong here?
Thanks for helping, a.

additional info: I use IconJar to export them!

Downloaded Font Awesome into HACS

adding it to Settings->Devices&Services->Add Integration->Fontawesome Icons

Error
Config flow could not be loaded: {"message":"Invalid handler specified"}

previously I had it configured in the configuration.yaml, but that also does not work anymore

In the latest HA Core (>2021.4), Fontawesome integration no longer has the Options where I could enable/disable the different flavors (outline, filled…).

Basically the integration no longer works. Reinstalling does not fix the issue.

Since I updated HA to 2021.5 I have trouble with the integration.

Now I get the following error:

This error originated from a custom integration.


Logger: homeassistant
Source: custom_components/fontawesome/__init__.py:48
Integration: Fontawesome icons (documentation)
First occurred: 10:25:12 PM (2 occurrences)
Last logged: 10:26:40 PM

Error doing job: Task exception was never retrieved
Traceback (most recent call last):
  File "/config/custom_components/fontawesome/__init__.py", line 38, in _update_listener
    register_modules(hass, config_entry.options)
  File "/config/custom_components/fontawesome/__init__.py", line 48, in register_modules
    url_set.discard(ICONS_URL+v)
AttributeError: 'UrlManager' object has no attribute 'discard'

Installation Type | Home Assistant Container
Development | false
Supervisor | false
Docker | true
Virtual Environment | false
Python Version | 3.8.9
Operating System Family | Linux
Operating System Version | 4.19.0-16-amd64
CPU Architecture | x86_64

I have followed the instructions yet when i try to use the icons they don't appear. I have checked that everything is as it should be. I don't suppose there is an issue relating to version 0.87.0 of HA? I am running on HASSIO with HassOS 1.13. I can't find anything in the logs etc.

This is more a question than a bug report, but I am curious about icon sizes.

In my lovelace front end, I am displaying two icons:

If I view the same icons on the Font Awesome website, the icon used for Wind Gust (fal:wind-warning) seems larger and more consistent in size with the Wind Lull (fal:wind) icon:

I'm sure there is a logical reason (icon sized on width, rather than height maybe?), but I was curious as to why and if there was a way to address it?

Thank you in advance!

I am running HA 2023.2.5 with Frontend 20230202.0 - latest and the latest version of this integration 2.1.5 and for some reason, icons do not load properly.

They return a 404 and the URL is http://homeassistant.local:8123/fontawesome/icons/solid/house.svg.

To load the integration I just added the following to the <home-assistant>/configuration.yaml file:

fontawesome:

what I am missing here? 🤔

Would there be an option to activate the other sets too?

Recently this PR was merged: home-assistant/frontend#18189

It allowed to use multi-color icons.
Here a test example is provided:

• JS file & dashboard - home-assistant/frontend#18189 (comment)
• virtual entities - home-assistant/frontend#18189 (comment)

W/o Fontawesome installed (or with disabled) the dashboard looks like:

But when I enable Fontawesome - I see this:

Here some paths seem to be not displayed.
After HA reboot I see this:

Do not bother about colors, these are virtual lights and they reset to defaults at HA reboot.

So, with Fontawesome enabled, these multi-color icons stop rendering.

I suspect that this new approach and Fontawesome are conflicting somehow.

"This integration does not support configuration via the UI. If you followed this link from the Home Assistant website, make sure you run the latest version of Home Assistant."

Its the same if I click the link, and if I install directly in HACS.

Also, I do have the latest version of HA.

Please, is it possible to update to the last font awesome icons version repository?

I really want some free icons that are in the last version and I can't use because this is not update.

You do a super great job, thanks in advance

Should this integration enable the unicode versions of the fontawesome icons to work? I'm trying to inject a couple of icons using CSS.

e.g:

style: | #info::before { content: '\e050'; }

HI Thomas,

please see home-assistant/core#67105 where Fontawesome is logged in the fatal setup after updating to dev20220223.
As are Browsermod and Favicon.

please have a look, and if possible advise?
thanks!

My usual steps are:

1. Place a new icon into custom_icons.
2. Reboot HA.
3. Use the icon in HA (in cards like Entities card, for instance).

Tried to skip rebooting HA by clearing a browser's cache (Chrome + Win10), failed.
Is it mandatory to reboot HA?

I love the idea of being able to use SVGs from Flaticon but I am unsure how to exactly use them. I put some in the custom_icon directory and tried using prefix you stated but I got nothing. I was also unsure how you got the icon to spin or change color and what the #fullcolor was used for. Any help would be great.

I installed this integration today, but the icons won't load.
i followed the instructions, restarted couple off times but they don't show up??

in dev console i see they load. see picture

Is there anyway we could get a guide or script for patching pro icons without an active subscription to Font Awesome? I have Pro 5 access, but I can't access the NPM registry to update the icon files. I can download the copies of what's in the registry through the download page though, so if there's a way I can point the patch script to that it would be great.

It seems that not all font awesome icons are square, and this causes the offset to be wrong. I've generated the html files myself (from the font awesome pro icons). version is 5.8.2, not sure if this is related.

mdi:thermometer

fas:thermometer-three-quarters

Upgraded to 0.109 and this issue showed up in my log:

 Log Details (WARNING)

Logger: homeassistant.helpers.translation
Source: helpers/translation.py:206
First occurred: 3:56:35 PM (10 occurrences)
Last logged: 3:56:40 PM
• fontawesome: the '.translations' directory has been moved, the new name is 'translations', starting with Home Assistant 0.111 your translations will no longer load if you do not move/rename this

Stats:

• Home Assistant 0.103.4
• Installed under venv — not hass.io

In following your instructions for Fontawesome-Pro, I I attempt to apply the patch:

git apply < fontawesome-pro.patch

That results in the following error trace:

<stdin>:49: trailing whitespace.
import txt from "@fortawesome/fontawesome-pro/sprites/duotone.svg"
<stdin>:50: trailing whitespace.
const iconset = document.createElement("ha-iconset-svg");
<stdin>:51: trailing whitespace.
iconset.name="fad";
<stdin>:52: trailing whitespace.
iconset.size="1024";
<stdin>:53: trailing whitespace.
iconset.innerHTML = txt.replace(/\<symbol/g, '<g').replace(/\<\/symbol\>/g, '</g>');
error: patch failed: custom_components/fontawesome/config_flow.py:42
error: custom_components/fontawesome/config_flow.py: patch does not apply

Any suggestions for how to fix this?

Hi
I'm using HA on an iPhone XS and 10.5 inch iPad.
I have a few dual tone icons that seems to disappear when they scaled down on smaller screens.
Here are a few screenshots showing the problem.
Both screenshots were taken on the iPad. The first one in portrait mode (when icons are smaller):

The second one in landscape mode when they are bigger:

On the iPhone they are never visible.
Finally oddly enough, when I install has-fontawesome the icon next to HACS on the sidebar disappears. If I remove the extension, it comes back.
I'm using the latest 2.1.5 version of the extension.

This morning I upgraded to 3.10 and my icons from fontawesome now have stopped working.

After latest update the custom icons set to views (on the header) not visible anymore.

Icons doubles size, after latest update
HACS in side-menu = 4X-size
fas:thermometer-half, In Card = 4X-size

Restarted, and Rebooted, didn't solve it

Hello,

is there a way to make the icons bigger they look way too small when you compare with the orignal icons

Thanks.

looks like the dimension of icons not the correct ones
icons on site are 2x2 , shouldn't they be 1x1?

right side is cut off in all icons

After following your instructions, putting the three html files inside the wwwfolder, adding the configuration.yaml entries, Home Assistant is giving me an error saying that "icons should start prefix "mdi:"". The icon goes back to the previous mdi icon.

I recently installed using HACS. The documentation says to reboot HA, but even after doing that the FontAwsome integration was not available in my integrations list. I found that I needed to reboot the entire system before I could find and activate the FA integration.

For reference, I'm using HA on Debian in supervised mode following these instructions:
https://community.home-assistant.io/t/installing-home-assistant-supervised-on-debian-10/200253

Hey @thomasloven,

I blatantly ripped your code to create a component for Bootstrap's Icon set (wanted to get something going for my home):
https://github.com/scottgearyau/hass-bootstrap-icons

Wondering if you'd like to "reclaim" it, or perhaps expand on the "hass-fontawesome" to include these (as it'd just require an extra dep an a few lines of code)... however the name of the repo would no longer make sense :).

Cheers.

I tried to upload a pro icon to the /custom_icons folder, and struggled for a bit before renaming it

Before:
tree-christmas.svg (nothing loaded)
After:
christmastree.svg (loads fine)

I am unsure if I botched something or not, but I just installed master and restarted HA

Probably due to some changes made to support the new icon picker.

Hi,

I'm trying to build my component to include pro icons and I'm receiving the following error

Hash: ba782f162b2364467edb93551b9c4ca799d0a1fb8256572993d03798990881947dc46798f46f1159dbd942729eb046477543
Version: webpack 4.43.0
Child
Hash: ba782f162b2364467edb
Time: 116ms
Built at: 05/01/2020 5:28:04 PM
1 asset
Entrypoint main = custom_components/fontawesome/data/fab.js
[0] ./js/fab.js 290 bytes {0} [built]
ERROR in ./js/fab.js
Module not found: Error: Can't resolve '@fortawesome/fontawesome-pro/sprites/brands.svg' in D:\Git\hass-fontawesome\js'
@ ./js/fab.js 1:0-65 5:20-23
Child
Hash: 93551b9c4ca799d0a1fb
Time: 101ms
Built at: 05/01/2020 5:28:04 PM
1 asset
Entrypoint main = custom_components/fontawesome/data/far.js
[0] ./js/far.js 291 bytes {0} [built]
ERROR in ./js/far.js
Module not found: Error: Can't resolve '@fortawesome/fontawesome-pro/sprites/regular.svg' in D:\Git\hass-fontawesome\js'
@ ./js/far.js 1:0-66 5:20-23
Child
Hash: 8256572993d037989908
Time: 98ms
Built at: 05/01/2020 5:28:04 PM
1 asset
Entrypoint main = custom_components/fontawesome/data/fas.js
[0] ./js/fas.js 289 bytes {0} [built]
ERROR in ./js/fas.js
Module not found: Error: Can't resolve '@fortawesome/fontawesome-pro/sprites/solid.svg' in D:\Git\hass-fontawesome\js'
@ ./js/fas.js 1:0-64 5:20-23
Child
Hash: 81947dc46798f46f1159
Time: 97ms
Built at: 05/01/2020 5:28:04 PM
1 asset
Entrypoint main = custom_components/fontawesome/data/fal.js
[0] ./js/fal.js 291 bytes {0} [built]
ERROR in ./js/fal.js
Module not found: Error: Can't resolve '@fortawesome/fontawesome-pro/sprites/light.svg' in D:\Git\hass-fontawesome\js'
@ ./js/fal.js 1:0-64 5:20-23
Child
Hash: dbd942729eb046477543
Time: 96ms
Built at: 05/01/2020 5:28:04 PM
1 asset
Entrypoint main = custom_components/fontawesome/data/fad.js
[0] ./js/fad.js 293 bytes {0} [built]
ERROR in ./js/fad.js
Module not found: Error: Can't resolve '@fortawesome/fontawesome-pro/sprites/duotone.svg' in D:\Git\hass-fontawesome\js'
@ ./js/fad.js 1:0-66 5:20-23
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] build: webpack

I build this using the following commands:
npm config set "@fortawesome:registry" https://npm.fontawesome.com/
npm config set "//npm.fontawesome.com/:_authToken" XXXXX'
git clone https://github.com/thomasloven/hass-fontawesome
cd hass-fontawesome/
git apply --reject --whitespace=fix fontawesome-pro.patch
npm install && npm run-script build

I did not have this issue in previous version.

Thank you for creating this awesome component!

Hi Thomas,

Well done! You are making an expressive contribution to the HA community.
I have a font awesome pro license and tried to export the light library but end up with an error and half of the icons don't get saved in the html file.
I have attached the error:

[fontawesome-pro-5.7.2-web/svgs]$ ./generate.py
Traceback (most recent call last):
File "./generate.py", line 31, in
make_file('light', 'fal', out)
File "./generate.py", line 15, in make_file
width = float(size[2])
ValueError: could not convert string to float: size="1024

Could you please help me to fix that?

Thanks

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.

Hi,
the icons are not displayed in the android app (2021.6.2-full).
Rgds,

I've just installed font awesome and have it working, including pro icons for basic use. I can't seem to get colors or size to change no matter what I do.

Maybe it's my syntax? but I've so many combinations. If I try a simply invert (fapro:iconName#invert) on a duo icon that does work. but I can't actually choose any specific colors or change size.

Here is everything I've tried which has had absolutely no affect in any way.

For the below "color" I've also tried "primary" and "fa-primary" and "primary-color", all have no affect whatsoever
far:icon#color:white
far:icon#color=white
far:icon#color:#ffffff
far:icon#color=#ffffff
far:icon#size=15px
far:icon#size:15

am I missing something here or does anyone have a simple example of the correct syntax...or is it simply a bug?

Problem statement: svg icon in custom_icons is detected but not rendered in dashboards.

I've created a directory config/custom_icons and have put an SVG icon there.
I referenced it in dashboards as fapro:iconname.svg. The auto completion in the visual editor of the dashboard detects my icon.
But in the dashboard itself the icon is not shown/rendered. I cleared the browser cache, I tried it on my PC (Firefox) and on my android mobile using the companion app.

What needs to be done?

https://www.home-assistant.io/blog/2021/03/03/release-20213/#breaking-changes

Custom integrations now require a version key in their manifest file, this also means that all custom integrations now require a manifest file.

No 'version' key in the manifest file for custom integration 'fontawesome'. This will not be allowed in a future version of Home Assistant. Please report this to the maintainer of 'fontawesome'

Hi, I tried to use a custom icon with #fullcolor but sadly it doesn't work fine for me, here the result:

As you can see when #fullcolor is added to icon, it is shifted up and right, any idea please?

First thanks for the update to this, it's working awesome. I found an issue when using other custom svg icons and was wondering if you had ideas on how to make them work with this. The icon set is this one: https://iconic.app/

I narrowed the issue down to the 'fill' attribute that's set on the root svg element (they also don't set xmlns="http://www.w3.org/2000/svg" but not sure if that matters). I can see that it's not something the custom component looks for or passes to home-assistant. Is this something that could be parsed and passed to home assistant? I couldn't find exactly where in the frontend code to look and see if it would even be possible and handled by HA correctly.

If it's not something you want to handle in this custom component, I would appreciate any push in the right direction.

Example

<svg width="24" height="24" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16.75 17.25H17.25C18.3546 17.25 19.25 16.3546 19.25 15.25V6.75C19.25 5.64543 18.3546 4.75 17.25 4.75H6.75C5.64543 4.75 4.75 5.64543 4.75 6.75V15.25C4.75 16.3546 5.64543 17.25 6.75 17.25H7.25"/>
  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 15.75L9 19.25H15L12 15.75Z"/>
</svg>

Hello,

the fields for fontawesome in HA don't show up (the dialog boxes are still there)
the icons are showing up and work fine though

here is an image (tested on chrome & firefox)

Since the 2021.11 update to HA, several users have reported that having any custom icon integration installed causes scaling issues with custom icons including the HACS icon in Firefox, e.g. home-assistant/frontend#10556

I've confirmed for myself that after disabling fontawesome, the scaling issues are resolved. I don't have any other custom icon sets installed.

The issue is similar to #50 so I tried rolling back to fontawesome v 2.1.3, but the issue persists.

The incorrectly scaled icons in this screenshot are all fontawesome ones, the mdi ones are correct:

Sometimes affected icons in the views navigation bar disappear, sometimes they are huge (see 2nd picture below):

Other custom icons, such as the HACS icon and the shower icon (which I created myself by following these instructions) are also affected:

If fontawesome is disabled then the fontawesome icons stop working (obviously) and the other custom icons scale correctly.

I am using fontawesome v 2.1.4, HA docker v 2021.11.5 and Firefox v 94.0.1. Possibly related to the icon picker update in 2021.11 - I updated straight from 2021.10 to 2021.11.5.

I installed Fontawesome through HACS and verified it is showing in /custom_components/fontawesome. I also have verified that it is running and set up on the Integrations page in HA. After restarting HA and the icons continuing to not show, I tried adding fontawesome: to the config yaml and restarting. Still though, the icons will not show up on various places I try to add them (e.g. dashboard icon sections, lovelace entity icons, etc). I am running the latest HA Core and OS.

Hi,

I'm using the Pro version of Font Awesome, downloading some SVGs in duotone mode into the custom_icons folder.

Maybe I make some mistakes (even of inexperience) but I am not able to keep the two original colors set through the fill property in the path of the SVG files (ex. #E63946). They are always overwritten by the primary color of Home Assistant (in my case the classic blue).

How can I keep the original colors that I have set in the SVG files?

Icons are not appearing on 2021.5.2 with Ver. 2.0.0.b3. Tested on Safari, Chrome, HA iOS App.

No event in logs suggesting the integration is broken. Logs suggest it loaded in .97s.

one problem I've noticed for some time is that if I load the svg icon, assign it to an entity and then later overwrite the svg icon to modify it, this doesn't change its appearance on lovelace. if I change the name of the file it works. i tried restarting, taking off the icon and restarting but it seems the icon is being saved elsewhere. is there a trick to fix it?

HACS is displaying this error:
You are running Home Assistant version '2021.5.0b4', but this repository requires minimum version '2021.5.0' to be installed.

I see you changed the hacs.json Home Assistant version to "2021.5.0b0", however I still cannot install it on "2021.5.0b4". Any ideas?

P.S. My HACS shows 1.3.2 as the currently available version of this.

i cant add 'https://github.com/thomasloven/hass-fontawesome' into custom repository as it says that 'Repository 'thomasloven/hass-fontawesome' exists in the store.' but when I search it in integration or frontend it says 'No repositories 😕 No downloaded repositories matching "fontawesome" found in this section. Try searching for something else!'

Do you thin it would be possible to add icons layering with other icons, text or counters ? As explained here : https://fontawesome.com/how-to-use/on-the-web/styling/layering

From what I've seen in the Home Assistant implementation, I don't think it would be easy to do it, or even if it's possible to do it.

Your opinion ?

I`ve installed with hacs and then added integration, cannot see any new icons in the list