Material Symbols for Home Assistant

Material Symbols for Home Assistant


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
  • About 8% of icons appear blank due to an SVG “viewbox” issue

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.js into your config/www folder.
  • Go to Configuration → Lovelace Dashboards → Resources → Add Resource
  • set url as /local/material-symbols.js and Resource Type as Javascript Module.
  • Add the following to your configuration.yaml, save and restart HA.
    frontend:
      extra_module_url:
        - /local/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: true in 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


Copyright and license

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

10 Likes

Update 10/08/2023

Hi all, just a quick update! I have been working on resolving a couple of issues so far, and I am happy to report that the icon/symbols from A-J have been resolved and will show correctly in the latest release. Furthermore, I have updated the Preview Tool to now load faster. The search functionality, however, still needs improvement and I am working on this.

1 Like

Thank you for your contribution! Are there any disadvantages to using these icons? For example, loading slower, or changing thus breaking views, etc?

Nice!!¨

Well done!

Not that I have found. Once installed and the browser cache cleared, they appear as quick as mdi icons would as far as I can tell.

1 Like

Thank you!