Hey All! I wanted to share something with the community that I have been working on for a little while.
I have wanted to bring the UI design, Material Design 3 by Google, into Home Assistant, and to that end, I have been working on a number of projects to do this. I’m by no means a developer, but I do love to dabble where I can!
Without further ado, may I introduce you to Material Symbols for Home Assistant. It is a collection of 18620 Google Material Symbols files for use within Home Assistant.
This repository has a Preview Tool that can be used to assist in picking the correct the icon. This is a highly modified version of the one used/created by @Andy_Allsopp in his project hass-hue-icons.
This preview tool uses keywords to help you find icons matching your need for use for YAML configuration or UI interface. Simply type in what you are looking for and copy the icon string, starting m3s:.
Please be aware that the preview tool has a couple of issues I am working on to resolve:
- Slow searching due to large number of icons
Any help and contributions to resolve these would is greatly appreciated!
Installation
Unfortunately Material Symbols has not yet a default repository in the Home Assistant Community Store (HACS) default list yet.
However, you can, add this repository via a couple of methods:
Add HACS Custom Repository (Recommended):
To install follow the below steps:
- Open HACS (installation instructions are here).
- Open the menu in the upper-right and select “Custom repositories”.
- Enter the repository:
https://github.com/beecho01/material-symbols - Select the category “Lovelace”.
- Select “ADD”.
- Open your “configuration.yaml” via File editor or other means.
- Add the following, save and restart Home Assistant.
lovelace: mode: yaml resources: - url: /hacsfiles/material-symbols/material-symbols.js type: module
Manual:
- Copy
dist/material-symbols.jsinto yourconfig/wwwfolder. - Go to Configuration → Lovelace Dashboards → Resources → Add Resource
- set url as
/local/community/material-symbols/material-symbols.jsand Resource Type asJavascript Module. - Add the following to your configuration.yaml, save and restart HA.
frontend: extra_module_url: - /local/community/material-symbols/material-symbols.js - Save, restart Home Assistant.
Usage
- In your entity editor, specify an icon as
m3s:<icon-name>-<style> - If you set
state_color: truein your card, you’ll see the icons get colorised based upon the current RGB setting.
Example:
title: Smart Plug
state_color: true
type: entities
entities:
- entity: switch.tv_smart_plug
name: My TV
icon: m3s:switches-outlined
Troubleshooting
Can’t see the icons?
If you cannot see the new icons, or you get an empty box where you’re expecting an icon, clear you brpwser cache and reload the Home Assistant interface.
Icons don’t show on first load of the dash?
Did you add the resource in your configuration.yaml? See the installation section for details.
Thanks
- Big thanks to @Andy_Allsopp for the basis of this work.
- @hulkhaugen and @thomasloven for the technique.
Copyright and license
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.
