search

thomasloven / hass-fontawesome

🔹 Use icons from fontawesome in home-assistant
Other
274 stars 52 forks source link

Issue with the fill attribute and custom icons (Iconic) #38

Closed shauder closed 3 years ago

shauder commented 3 years ago

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>
thomasloven commented 3 years ago

Home assistant draws all icons with a fill color by default. Try the #fullcolor suffix. Since this is using currentColor, that'll likely work nicely right out of the box.

shauder commented 3 years ago

That worked, thanks for the help!