Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/beecho01/material-symbols
Material Symbols for Home Assistant is a collection of 13460 Google Material Symbols for use within Home Assistant. It uses the icon-set produced and maintained by iconify.
https://github.com/beecho01/material-symbols
home-assistant home-assistant-integration material-symbols
Last synced: about 8 hours ago
JSON representation
Material Symbols for Home Assistant is a collection of 13460 Google Material Symbols for use within Home Assistant. It uses the icon-set produced and maintained by iconify.
- Host: GitHub
- URL: https://github.com/beecho01/material-symbols
- Owner: beecho01
- License: other
- Created: 2023-07-22T20:31:17.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-27T16:20:07.000Z (12 days ago)
- Last Synced: 2024-10-27T18:08:22.580Z (12 days ago)
- Topics: home-assistant, home-assistant-integration, material-symbols
- Language: Python
- Homepage:
- Size: 13.5 MB
- Stars: 34
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
Material Symbols for Home Assistant
**Material Symbols for Home Assistant** is a collection of 13482 Google Material Symbols for use within Home Assistant. It uses the icon-set produced and maintained by [iconify](https://github.com/iconify/icon-sets).
There is a [Icon Finder Tool](https://beecho01.github.io/material-symbols-iconfinder/) 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,482.
---
- [Table of Contents](#table-of-contents)
- [Migrating from v1.X.X to 202X.X.X](#migrating-from-v1xx-to-202xxx)
- [Installation](#installation)
- [HACS Installation (Recommended)](#hacs-installation-recommended)
- [Manual Installation](#manual-installation)
- [Usage](#usage)
- [Example](#example)
- [Community](#community)
- [Troubleshooting](#troubleshooting)
- [Icons Not Showing?](#icons-not-showing)
- [Feedback and Contributions](#feedback-and-contributions)
- [Thanks](#thanks)
- [Stargazers](#stargazers)
- [Copyright and License](#copyright-and-license)
- [License Summary](#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](#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](#installation) steps to install the 202X.X.X integration.
---
#### 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.
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.
---
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:
```yaml
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](https://beecho01.github.io/material-symbols-iconfinder/) to help you select the correct icon for your needs.
#### Example
```yaml
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](https://community.home-assistant.io/t/material-symbols-for-home-assistant/599573).
---
## 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](https://community.home-assistant.io/t/icons-doesnt-display-on-app/251852/15), 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](https://github.com/vigonotion) and his repository [hass-simpleicons](https://github.com/vigonotion/hass-simpleicons) and [@thomasloven](https://github.com/thomasloven) for his repository [hass-fontawesome](https://github.com/thomasloven/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
[](https://github.com/beecho01/material-symbols/stargazers)
---
## Copyright and License
This work is licensed under a [Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License](http://creativecommons.org/licenses/by-nc-sa/4.0/).
#### 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.