### Example Usage of Material Symbols in Home Assistant Lovelace UI

Source: https://github.com/beecho01/material-symbols/blob/main/README.md

Demonstrates how to use various Material Symbols icons with different prefixes in a Home Assistant Lovelace entities card. This example showcases the 'm3o', 'm3of', 'm3r', 'm3rf', 'm3s', and 'm3sf' prefixes for different icon styles.

```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'
```

--------------------------------

### Icon Finder Tool Usage Example (YAML)

Source: https://context7.com/beecho01/material-symbols/llms.txt

This YAML example demonstrates the workflow for using the online Material Symbols Icon Finder Tool. It explains how to search for icons, select one, and then paste the resulting 'prefix:icon_name' format into Home Assistant configurations, such as entity definitions.

```yaml
# Using the Icon Finder Tool:
# 1. Visit: https://beecho01.github.io/material-symbols-iconfinder/
# 2. Type in the search box (e.g., "light", "home", "settings")
# 3. Click on the desired icon
# 4. The icon reference is copied to clipboard (e.g., "m3o:light")
# 5. Paste directly into your YAML or UI configuration

# Example workflow:
# Search: "temperature"
# Results: thermostat, device_thermostat, thermometer, etc.
# Click: thermostat icon in m3o style
# Copied: "m3o:thermostat"
# Use in config:
type: entity
entity: sensor.bedroom_temperature
icon: 'm3o:thermostat'
```

--------------------------------

### Manual Installation Directory Structure

Source: https://context7.com/beecho01/material-symbols/llms.txt

This bash snippet outlines the required directory structure for manually installing the Material Symbols integration within your Home Assistant configuration folder. It shows the placement of Python files, JavaScript, translation files, and icon data.

```bash
# Directory structure required for manual installation
config/
└── custom_components/
    └── material_symbols/
        ├── __init__.py
        ├── config_flow.py
        ├── manifest.json
        ├── material_symbols.js
        ├── translations/
        │   └── en.json
        └── data/
            ├── m3o/
            │   ├── icons.json
            │   └── *.svg
            ├── m3of/
            │   ├── icons.json
            │   └── *.svg
            ├── m3r/
            │   ├── icons.json
            │   └── *.svg
            ├── m3rf/
            │   ├── icons.json
            │   └── *.svg
            ├── m3s/
            │   ├── icons.json
            │   └── *.svg
            └── m3sf/
                ├── icons.json
                └── *.svg
```

--------------------------------

### HACS Installation Steps for Material Symbols

Source: https://context7.com/beecho01/material-symbols/llms.txt

Provides a step-by-step guide for installing the Material Symbols integration using HACS (Home Assistant Community Store). It covers finding the integration, installing it, adding it via the Home Assistant UI, and restarting the system.

```yaml
# Step 1: Install via HACS
# Navigate to HACS > Integrations > Search "Material Symbols" > Install

# Step 2: Add integration via Home Assistant UI
# Settings > Devices & Services > Add Integration > Material Symbols

# Step 3: Restart Home Assistant
# After restart, icons are available using the prefix:icon_name format

# Verify installation by checking the integration status
# Settings > Devices & Services > Material Symbols should show "Configured"
```

--------------------------------

### Expected Output: Successful Icon Count Script

Source: https://github.com/beecho01/material-symbols/blob/main/docs/AUTOMATION_MONITORING.md

Example output demonstrating a successful run of the icon counting script, showing counts per style and the total, along with a confirmation of README update.

```text
Counting Material Symbols icons...

m3o: 2538 SVG files
m3of: 3854 SVG files
m3r: 2228 SVG files
m3rf: 3342 SVG files
m3s: 1590 SVG files
m3sf: 2004 SVG files

Total SVG files: 15556
✓ Updated README.md with icon count: 15,556
```

--------------------------------

### Material Symbols Integration File Structure

Source: https://github.com/beecho01/material-symbols/blob/main/TROUBLESHOOTING.md

This snippet outlines the expected file structure for the Material Symbols custom component within a Home Assistant installation. It shows the main Python files, the JavaScript file, and the data directory containing icon definitions and SVG files for various icon sets.

```text
custom_components/material_symbols/
├── __init__.py
├── config_flow.py
├── manifest.json
├── material_symbols.js
└── data/
    ├── m3o/
    │   ├── icons.json
    │   └── [thousands of .svg files]
    ├── m3of/
    │   ├── icons.json
    │   └── [thousands of .svg files]
    ├── m3r/
    │   ├── icons.json
    │   └── [thousands of .svg files]
    ├── m3rf/
    │   ├── icons.json
    │   └── [thousands of .svg files]
    ├── m3s/
    │   ├── icons.json
    │   └── [thousands of .svg files]
    └── m3sf/
        ├── icons.json
        └── [thousands of .svg files]
```

--------------------------------

### Commit and Push Changes

Source: https://github.com/beecho01/material-symbols/blob/main/docs/AUTOMATION_SYSTEM.md

Stages all modified files, commits them with an automated message including the updated version, and pushes the changes to the repository. This requires Git to be installed and configured.

```bash
git add .
git commit -m "🤖 Auto-update Material Symbols icons (v2025.08.23)"
git push
```

--------------------------------

### Check Latest Iconify Commit Hash

Source: https://github.com/beecho01/material-symbols/blob/main/docs/AUTOMATION_SYSTEM.md

Fetches the latest commit hash for the material-symbols.json file from the Iconify API. This is used to detect if updates are available. It requires `curl` to be installed.

```bash
# Gets the latest commit hash for material-symbols.json
curl -s "https://api.github.com/repos/iconify/icon-sets/commits?path=json/material-symbols.json&per_page=1"
```

--------------------------------

### Troubleshooting Icon Loading Issues (YAML)

Source: https://context7.com/beecho01/material-symbols/llms.txt

This YAML snippet provides common troubleshooting steps for icon loading problems in Home Assistant. It includes instructions for clearing browser cache, verifying integration status, checking the browser console for debug messages, and restarting Home Assistant.

```yaml
# Common fixes for icon loading issues:

# 1. Clear browser cache and hard refresh
# Windows/Linux: Ctrl+Shift+R
# Mac: Cmd+Shift+R

# 2. Verify integration status
# Settings > Devices & Services > Material Symbols
# Status should show "Configured"

# 3. Check browser console for debug messages
# Open Developer Tools (F12) > Console tab
# Look for messages:
# - "Material Symbols: Starting initialisation"
# - "Material Symbols: Integration ready"
# - "Material Symbols: Fetched X/6 icon lists successfully"
# - "Material Symbols: Custom icons defined for all sets"

# 4. Restart Home Assistant if icons still don't load
# Settings > System > Restart
```

--------------------------------

### Fetch List of Icons via HTTP API (Bash)

Source: https://context7.com/beecho01/material-symbols/llms.txt

Demonstrates how to use `curl` to query HTTP endpoints that return a JSON list of available icons for a specified style. This is useful for programmatic access to the icon set.

```bash
# Fetch list of outlined icons
curl http://your-home-assistant:8123/material_symbols/m3o/icons.json

# Response format:
# [{"name": "light"}, {"name": "home"}, {"name": "settings"}, ...]

# Fetch list of rounded filled icons
curl http://your-home-assistant:8123/material_symbols/m3rf/icons.json

# Available endpoints (one per icon style):
# /material_symbols/m3o/icons.json   - Outlined
# /material_symbols/m3of/icons.json  - Outlined Filled
# /material_symbols/m3r/icons.json   - Rounded
# /material_symbols/m3rf/icons.json  - Rounded Filled
# /material_symbols/m3s/icons.json   - Sharp
# /material_symbols/m3sf/icons.json  - Sharp Filled
```

--------------------------------

### Fetch Individual Icon SVG via HTTP API (Bash)

Source: https://context7.com/beecho01/material-symbols/llms.txt

Shows how to fetch a specific icon as an SVG file using `curl` and a defined URL pattern. This endpoint is primarily used internally by the Home Assistant frontend but can be accessed directly.

```bash
# Fetch a specific icon SVG
curl http://your-home-assistant:8123/material_symbols/m3o/light.svg

# Example SVG response:
# <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
#   <path d="M12 2C8.13 2 5 5.13 5 9c0 2.38 1.19..."/>
# </svg>

# URL pattern: /material_symbols/{prefix}/{icon_name}.svg
# Examples:
# /material_symbols/m3o/home.svg
# /material_symbols/m3rf/settings.svg
# /material_symbols/m3s/account_circle.svg
```

--------------------------------

### Customizing Entities with Material Symbols (YAML)

Source: https://context7.com/beecho01/material-symbols/llms.txt

This YAML snippet illustrates how to customize Home Assistant entities using Material Symbols. It shows the configuration within `configuration.yaml` for various entity types like sensors, switches, automations, and scripts, specifying the icon format as 'prefix:icon_name'.

```yaml
# Customize entities in configuration.yaml
homeassistant:
  customize:
    sensor.living_room_temperature:
      icon: 'm3o:thermostat'
    binary_sensor.front_door:
      icon: 'm3rf:door_front'
    switch.living_room_fan:
      icon: 'm3o:mode_fan'
    automation.morning_routine:
      icon: 'm3s:routine'
    script.goodnight:
      icon: 'm3of:bedtime'

# Or customize via the UI:
# 1. Go to Settings > Devices & Services > Entities
# 2. Select an entity
# 3. Click the settings icon
# 4. Enter the icon in format 'm3o:icon_name'
```

--------------------------------

### Compare README Icon Count Before and After Automation

Source: https://github.com/beecho01/material-symbols/blob/main/docs/AUTOMATION_MONITORING.md

Use grep to check the icon count in the README file before and after running the automation script to ensure changes are reflected correctly.

```bash
# Before making changes, note the current count
grep "collection of" README.md

# After running automation, check if it changed
grep "collection of" README.md
```

--------------------------------

### Run Local Icon Processing and Update Detection Scripts

Source: https://github.com/beecho01/material-symbols/blob/main/docs/AUTOMATION_MONITORING.md

Execute Python scripts for complete icon processing and testing update detection locally. Navigate to the specified directory before running.

```bash
# Complete icon processing (includes count, README update, version management)
cd custom_components/material_symbols/data
python generate_svgs.py

# Test update detection
python scripts/test_update_detection.py
```

--------------------------------

### Icon Style Prefixes and Usage in Home Assistant YAML

Source: https://context7.com/beecho01/material-symbols/llms.txt

Defines the prefixes for different Material Symbol styles and demonstrates their usage in Home Assistant YAML configurations for entities and Lovelace cards. This allows users to select specific icon styles for their dashboards.

```yaml
# Icon prefix reference
# m3o  - Outlined style
# m3of - Outlined and Filled style
# m3r  - Rounded style
# m3rf - Rounded and Filled style
# m3s  - Sharp style
# m3sf - Sharp and Filled style

# Format: 'prefix:icon_name'
icon: 'm3o:light'
icon: 'm3rf:home'
icon: 'm3s:settings'
```

```yaml
# Example: Applying icons to light entities
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'
```

```yaml
# Button card with Material Symbol icon
type: button
entity: switch.desk_lamp
name: Desk Lamp
icon: 'm3o:desk_lamp'
tap_action:
  action: toggle

# Entity card with custom icon
type: entity
entity: sensor.temperature
name: Temperature
icon: 'm3rf:thermostat'

# Glance card with multiple icons
type: glance
entities:
  - entity: binary_sensor.door
    name: Front Door
    icon: 'm3o:door_front'
  - entity: binary_sensor.motion
    name: Motion
    icon: 'm3o:motion_sensor_active'
  - entity: sensor.humidity
    name: Humidity
    icon: 'm3o:humidity_percentage'
```

--------------------------------

### Icons List API Endpoint

Source: https://context7.com/beecho01/material-symbols/llms.txt

This endpoint provides a JSON list of available icons for a specified icon style. It's useful for programmatic discovery of icons.

```APIDOC
## GET /material_symbols/{prefix}/icons.json

### Description
Retrieves a JSON array of icon names for a given Material Symbol style.

### Method
GET

### Endpoint
`/material_symbols/{prefix}/icons.json`

### Parameters
#### Path Parameters
- **prefix** (string) - Required - The prefix for the icon style (e.g., `m3o`, `m3rf`, `m3s`).

#### Query Parameters
None

### Request Example
```bash
curl http://your-home-assistant:8123/material_symbols/m3o/icons.json
```

### Response
#### Success Response (200)
- **name** (string) - The name of an available icon.

#### Response Example
```json
[
  {"name": "light"},
  {"name": "home"},
  {"name": "settings"}
]
```

### Available Endpoints
- `/material_symbols/m3o/icons.json` - Outlined
- `/material_symbols/m3of/icons.json` - Outlined Filled
- `/material_symbols/m3r/icons.json` - Rounded
- `/material_symbols/m3rf/icons.json` - Rounded Filled
- `/material_symbols/m3s/icons.json` - Sharp
- `/material_symbols/m3sf/icons.json` - Sharp Filled
```

--------------------------------

### JavaScript Custom Icons Interface

Source: https://context7.com/beecho01/material-symbols/llms.txt

This JavaScript code demonstrates how to interact with the custom icon handlers provided by the Material Symbols integration. It shows how to retrieve individual icon data using `getIcon` and a list of all available icons using `getIconList` from a specific icon set.

```javascript
// Custom icons are registered for each icon set
// window.customIcons[prefix] provides two methods:

// getIcon(iconName) - Fetches and parses a single icon
// Returns: { viewBox: "0 0 24 24", path: "M12 2C8.13..." }
const iconData = await window.customIcons['m3o'].getIcon('light');
console.log(iconData.viewBox); // "0 0 24 24"
console.log(iconData.path);    // SVG path data

// getIconList() - Returns all available icons in the set
// Returns: [{ name: "light" }, { name: "home" }, ...]
const icons = await window.customIcons['m3rf'].getIconList();
console.log(icons.length);     // Number of icons in set
console.log(icons[0].name);    // First icon name
```

--------------------------------

### Individual Icon SVG Endpoint

Source: https://context7.com/beecho01/material-symbols/llms.txt

This endpoint allows fetching individual Material Symbols icons as SVG files, which are used internally by the Home Assistant frontend.

```APIDOC
## GET /material_symbols/{prefix}/{icon_name}.svg

### Description
Retrieves the SVG file for a specific Material Symbol icon.

### Method
GET

### Endpoint
`/material_symbols/{prefix}/{icon_name}.svg`

### Parameters
#### Path Parameters
- **prefix** (string) - Required - The prefix for the icon style (e.g., `m3o`, `m3rf`, `m3s`).
- **icon_name** (string) - Required - The name of the icon (e.g., `light`, `home`, `settings`).

#### Query Parameters
None

### Request Example
```bash
curl http://your-home-assistant:8123/material_symbols/m3o/light.svg
```

### Response
#### Success Response (200)
- SVG content representing the icon.

#### Response Example
```xml
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M12 2C8.13 2 5 5.13 5 9c0 2.38 1.19..."/>
</svg>
```

### URL Pattern Examples
- `/material_symbols/m3o/home.svg`
- `/material_symbols/m3rf/settings.svg`
- `/material_symbols/m3s/account_circle.svg`
```

--------------------------------

### Manual Icon Counting Script

Source: https://github.com/beecho01/material-symbols/blob/main/docs/AUTOMATION_SYSTEM.md

A Python one-liner to manually count the total number of SVG icon files across different style variants. Useful for debugging or verification purposes.

```python
# Count existing icons - currently returns 15,556 total
cd custom_components/material_symbols/data
python -c "
import os
folders = ['m3o', 'm3of', 'm3r', 'm3rf', 'm3s', 'm3sf']
total = sum(len([f for f in os.listdir(folder) if f.endswith('.svg')]) for folder in folders if os.path.exists(folder))
print(f'Total icons: {total}')
"
```

--------------------------------

### Generate SVGs and Update Versions

Source: https://github.com/beecho01/material-symbols/blob/main/docs/AUTOMATION_SYSTEM.md

Executes the main script for regenerating all SVG icons, updating the README with the icon count, and bumping the JavaScript and manifest versions. This script requires Python and the 'requests' library.

```python
cd custom_components/material_symbols/data
python generate_svgs.py
```

--------------------------------

### Check Git History for Automation Commits

Source: https://github.com/beecho01/material-symbols/blob/main/docs/AUTOMATION_MONITORING.md

Inspect the last 5 Git commits to verify automation activity. Look for specific commit messages indicating automated updates.

```bash
git log --oneline -n 5
# Look for commits like "🤖 Auto-update icon count in README"
```

--------------------------------

### Remove Material Symbols from configuration.yaml

Source: https://github.com/beecho01/material-symbols/blob/main/docs/Migration.md

This snippet shows how to remove the Material Symbols JavaScript module from the `frontend.extra_module_url` configuration in Home Assistant's `configuration.yaml` file. Ensure to adjust the path if you placed the file in a different location.

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

--------------------------------

### Test Update Detection Logic

Source: https://github.com/beecho01/material-symbols/blob/main/docs/AUTOMATION_SYSTEM.md

Runs a Python script designed to test the logic for detecting updates in the Material Symbols icon set. This script is part of the automation suite.

```python
python scripts/test_update_detection.py
```

--------------------------------

### Debug Icon Count Manually

Source: https://github.com/beecho01/material-symbols/blob/main/docs/AUTOMATION_MONITORING.md

Manually count the number of SVG files in a specific directory to debug potential issues with the automated icon count.

```bash
# Debug the count manually
ls custom_components/material_symbols/data/m3o/*.svg | wc -l
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.