Material Symbols for Home Assistant

Material Symbols for Home Assistant is a collection of 13,803 Google Material Symbols for use within Home Assistant. It uses the icon-set produced and maintained by iconify.

There is a Icon Finder Tool to help you select the correct icon. Simply type in what you're looking for, click the icon of choice, and the icon entry for home assistant will be copied to your clipboard (e.g., m3o:light). The copied text can be pasted for use in your YAML configuration or into you UI frontend interface.

---

Breaking Changes

• Repository Structure: The repository and installation have transitioned from a "Lovelace" repository (v1.X.X) to an "Integration" repository (202X.X.X+). Users should reinstall from the new integration repository to avoid compatibility issues.
• Icon Prefix Migration: The icon prefix has transitioned from m3s, which previously contained all icon styles, to individual prefixes based on style. Each style now has its unique prefix (e.g., m3o for outlined, m3r for rounded). Refer to the documentation for the complete list of prefixes.
• Reduction in Available Icons: The number of available icons has been reduced from ~18,600 to 13,803.

---

           

Table of Contents

• Table of Contents
• Migrating from v1.X.X to 202X.X.X
• Installation
  • HACS Installation (Recommended)
  • Manual Installation
• Usage
  • Example
• Community
• Troubleshooting
  • Icons Not Showing?
• Feedback and Contributions
• Thanks
  • Stargazers
• Copyright and License
  • License Summary

---

Migrating from v1.X.X to 202X.X.X

My recommendation here is to fully uninstall the existing v1.X.X repository and remove all traces of it from the system. Please do the following to complete this:

If you originally installed the icons via HACS:

1. Go to HACS and in the search bar search Material Symbols.
2. Find the repository in the list and click on it.
3. Click the Menu Icon (3 vertical dots) for the repository
4. Click Remove
5. On the Remove pop-up/modal, select Remove
6. Wait for this to complete
7. Go to your dashboard of choice and via the Menu Icon (3 vertical dots), select the Resources option.
8. Identify if a javascript module ending material-symbols.js is present. If so remove it.
9. After removing the resource and references, restart Home Assistant to apply the changes.
10. Once Home Assistant restarts, clear your browser’s cache to ensure it no longer tries to load the removed icon pack resources.
11. Continue to the Installation steps to install the 202X.X.X integration.

If you originally installed the icons via configuration.yaml:

If your resources are managed by configuration.yaml:

1. Remove the material-symbols.js from

   frontend:
     extra_module_url:
       - /local/community/material-symbols/material-symbols.js
   

   or the location you placed it.

If your resources are managed in the resources section of the dashboard UI:

1. Go to your dashboard of choice and via the Menu Icon (3 vertical dots), select the Resources option.
2. Identify if a javascript module ending material-symbols.js is present. If so remove it.

Make sure to delete the files from the location you placed it.

1. After removing the resource and files, restart Home Assistant to apply the changes.
2. Once Home Assistant restarts, clear your browser’s cache to ensure it no longer tries to load the removed icon pack resources.
3. Continue to the Installation steps to install the 202X.X.X integration.

---

Installation

HACS Installation (Recommended)

1. Add the Custom Repository to HACS manually:

   • Open Home Assistant and navigate to HACS.
   • Click on Integrations.
   • Click on the three dots in the top-right corner and select Custom repositories.
   • In the dialog that appears:
     • Repository URL: https://github.com/beecho01/material-symbols
     • Category: Integration
   • Click Add.
   • You should see a confirmation that the repository was added successfully.

2. Install the Integration:

   • In HACS, go back to Integrations.
   • Click on the Explore & Add Repositories button.
   • Search for Material Symbols.
   • Click on the Material Symbols integration.
   • Click Download in the bottom right corner.
   • Confirm the installation by clicking Download again.

3. ** Add Integration to Devices & Services:**

   • In the Home Assistant Settings menu, select Devices & Services.
   • Tap the + Add Integration button.
   • Search for Material Symbols and select it.
   • This should now show as successfully configured.
   • Tap Finish.

4. Restart Home Assistant:

   • After the installation completes, restart Home Assistant to load the new integration.
   • You're browser cache may need to be deleted to show the icons as desired.

Manual Installation

If you prefer to install the integration manually:

1. Download the Integration:

   • Download the material_symbols folder from the custom_components directory of this repository.

2. Copy to Home Assistant:

   • Place the material_symbols folder into your Home Assistant config/custom_components/ directory. The final path should be config/custom_components/material_symbols/.

3. Restart Home Assistant:

   • Restart Home Assistant to load the new integration.

4. ** Add Integration to Devices & Services:**

   • In the Home Assistant Settings menu, select Devices & Services.
   • Tap the + Add Integration button.
   • Search for Material Symbols and select it.
   • This should now show as successfully configured.
   • Tap Finish.

5. Restart Home Assistant:

   • Restart Home Assistant to complete the setup.

---

Usage

Once installed, you can use the Material Symbols icons in your Lovelace UI.

Icon Prefixes and Styles:

The icons come in six distinct styles, each with its own prefix:

• Outlined: m3o
• Outlined and filled: m3of
• Rounded: m3r
• Rounded and filled: m3rf
• Sharp: m3s
• Sharp and filled: m3sf

Using an Icon:

In your entity configuration, specify the icon using the appropriate prefix and icon name:

icon: 'prefix:icon_name'

Replace prefix with one of the prefixes above and icon_name with the desired icon. There is a Icon Finder Tool to help you select the correct icon for your needs.

Example

type: entities
title: Lights
entities:
  - entity: light.living_room
    name: Living Room Light
    icon: 'm3o:light'
  - entity: light.kitchen
    name: Kitchen Light
    icon: 'm3of:light'
  - entity: light.bedroom
    name: Bedroom Light
    icon: 'm3r:light'
  - entity: light.garage
    name: Garage Light
    icon: 'm3rf:light'
  - entity: light.porch
    name: Porch Light
    icon: 'm3s:light'
  - entity: light.garden
    name: Garden Light
    icon: 'm3sf:light'

---

Community

Join the discussion on the home assistant community forum.

---

Troubleshooting

Icons Not Showing?

• Clear Browser Cache: If icons are not displaying, clear your browser cache and reload the Home Assistant interface.
• Restart Home Assistant: Ensure you've restarted Home Assistant after installing the integration.
• Check Installation: Verify that the integration is installed correctly and that the icons are in the right directories.
• Mobile Application: Unfortunately, clearing the application cache isnt a sure-fire way to remove the existing cached icons. It has been suggested on the Community Forum thread here, that uninstalling the application and re-installing is the most likely way to get them to show correctly.

---

Feedback and Contributions

If you encounter issues or have suggestions, please open an issue on GitHub. Contributions are welcome! Feel free to submit pull requests.

---

Thanks

• Big thanks to @vigonotion and his repository hass-simpleicons and @thomasloven for his repository hass-fontawesome, of which this integration and github repository is based.
• Thanks to OpenAI and ChatGPT their LLM 01-preview for assistance in resolving issues during development.

Stargazers

---

Copyright and License

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

License Summary

• Attribution: You must give appropriate credit, provide a link to the license, and indicate if changes were made.
• NonCommercial: You may not use the material for commercial purposes.
• ShareAlike: If you remix, transform, or build upon the material, you must distribute your contributions under the same license.