This is a blatant rip from the fine @thomasleven's hass-fontawesome, and I haven't really done anything except modify his code (including this readme). I simply wanted a way to get some icons going for personal use, and this was the best example I had.
Buy him a coffee using the link @ the bottom of this readme :)
Use free icons from the bootstrap set in Home-assistant.
Not yet
Clone this repository or download the source code as a zip file and add/merge the custom_components/
folder with its contents in your configuration directory.
In order for the newly added integration to be loaded, HA needs to be restarted.
In HA, go to Configuration > Integrations.
In the bottom right corner, click the + Add Integration
button.
If the component is properly installed, you should be able to find the 'Bootstrap Icons' in the list. You might need to clear you browser cache for the integration to show up.
Find the icon you want in the gallery.
The prefix for each icon is bi:
Example:
- for an outlined alarm clock use
bi:alarm
- for a filled alarm clock use
bi:alarm-fill
The icons are useable anywhere in Home Assistant - not only in lovelace.
IMPORTANT: As the note above implies, SVG can contain CSS and Javascript, and thus shall be considered unsafe. Home Assistant normally protects you from this by unly using a very specific part of the SVG file, but using the #fullcolor
suffix circumvents this protection. I have tried adding another layer instead, but as those things go, you're only safe from the things you know.
In short: Only do this with icons you trust (and preferably have inspected the code for).
Yes.
bootstrap-icons:
That's it.
Buy @thomasleven a coffee: