Material Symbols for Home Assistant

Material Symbols for Home Assistant is 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 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:" for use.

---

Please be aware that this tool has a couple of issues I am working on to resolve:

• Slow seaching due to large number of icons

---

           

Table of contents

• Installation
• Usage
• Troubleshooting
• Community
• Thanks
• Copyright and license

---

Installation

Unfortunately Material Symbols has not yet been accepted into the Home Assistant Community Store (HACS) default list yet.

However, you can, add this repository via a few methods:

My Home Assistant Link (Recommended):

Add HACS Custom Repository:

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".
• Confirm the repository now appears in your HACS custom repositories list. Select "CANCEL" to close the custom repository window.
• In the HACS search, type "Material Symbols".
• Select the "Material Symbols" Respository from the list.
• Install the Repository.
• Open your "configuration.yaml" via File editor or other means.
• Add the following, save and restart Home Assistant.

frontend:
  extra_module_url:
    - /hacsfiles/material-symbols/material-symbols.js

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:volume-off-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.

---

Community

There's a thread over at the home assistant forums that tracks this repo.

---

Thanks

• Big thanks to @arallsopp for the basis of this repository and work he's undertaken.
• @hulkhaugen and @thomasloven for the technique.

Stargazers

---

Copyright and license

This work is licensed under a [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License][cc-by-nc-sa]. I do this for fun, without charge, and to give back to the community. You may remix, tweak, and build upon this work non-commercially, as long as you credit the original author, provide a link to the license, and indicate if any changes were made. You may do so in any reasonable manner, but not in any way that suggests the licensor endorses you or your use unless agreed. If you remix, transform or build upon the material, you must distribute your contributions under the same or compatible license as the original.