Material Symbols for Home Assistant - A Material Design 3 based icon pack

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

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/community/material-symbols/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/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: 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.

14 Likes

Update 10/08/2023 - v0.2.2


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.

Thanks,
beecho01

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!

Update 24/04/2024 - v0.4.0


Hi all,

I am happy to report that the icon/symbols from K-L have been resolved and will show correctly in the latest release (v0.4.0).

Thanks,
beecho01

Major Release Update - v1.0.0 is now live!


Hi All,

After renewed interest I have spent time updating all the SVG paths to conform to the viewbox=0 0 24 24 requirements for them to show correctly in Home Assistant. There is now 18620 icons to pick from based on the 2023 release of Googles Material Symbols.

In upcoming releases I hope to update the icons to include any changes that Google have made in 2024.

Thanks,
beecho01

1 Like

Great project, thanks a lot! :slight_smile:

Would you mind sharing a few pics how these icons look “in-game”? :slight_smile: That would be nice, thanks!

@paddy0174 you most certainly can!

Please see below a selection of screen grabs that I have showing them in use:

Custom Navigation Bar

Using:

  • m3s:favorite-rounded
  • m3s:devices-other-rounded
  • m3s:auto-awesome-sharp
  • m3s:history-rounded-filled
  • m3s:settings-outlined-filled

Screenshot 2024-04-25 031614

My Automations Page

Using:

  • m3s:location-home-sharp-filled
  • m3s:login-outlined

3 Likes

Is there a workaround or an alternative method for adding the resource through yaml? If I add said module through yaml, all the resources added through the UI disappear, on the other hand not doing that step causes the icons to not show up on many occasions.

3 Likes

Got to be honest on that one, I am not sure. I will see what I can find out.

2 Likes

any updates on this?

1 Like