Material Symbols for Home Assistant

Material Symbols for Home Assistant is a collection of 13,616 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,616.

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:

Go to HACS and in the search bar search Material Symbols.
Find the repository in the list and click on it.
Click the Menu Icon (3 vertical dots) for the repository
Click Remove
On the Remove pop-up/modal, select Remove
Wait for this to complete
Go to your dashboard of choice and via the Menu Icon (3 vertical dots), select the Resources option.
Identify if a javascript module ending material-symbols.js is present. If so remove it.
After removing the resource and references, restart Home Assistant to apply the changes.
Once Home Assistant restarts, clear your browser’s cache to ensure it no longer tries to load the removed icon pack resources.
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:

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:

Go to your dashboard of choice and via the Menu Icon (3 vertical dots), select the Resources option.
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.

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

Installation

HACS Installation (Recommended)

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

Download the Integration:
- Download the material_symbols folder from the custom_components directory of this repository.
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/.
Restart Home Assistant:
- Restart Home Assistant to load the new integration.
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.
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.

beecho01 / material-symbols

readme