Skip to content

[Bug]: Icons missing on Desktop Browsers (Chrome/Edge/Firefox) but working on Mobile App #1898

@jvnrambo

Description

@jvnrambo

Requirements

  • I checked the troubleshooting section in the README to verify that I have the latest Mushroom version.
  • I did a search to see if there is a similar issue or if a pull request is open.
  • I have read the state of card mod support (in pin issues) and understand card mod support is not provided in this repository.

Current Behavior

Hi everyone,

I’m facing a strange issue after updating to the latest version (Core 2026.4.1, Frontend 20260325.6). Some icons in mushroom-chips-card are completely invisible on PC browsers, while they work perfectly on the mobile app.

The Issue:
On the same line, some icons disappear while others are visible:

Occupancy Chip: No icon is displayed, but the Alarm Chip right next to it shows its icon perfectly.

Doors/Windows Chips: No icons displayed, but the Lights Chip on the same line works fine.

What I've tried (Desktop PC):

Tested on Edge, Firefox, and Chrome (all show the same bug).

Cleared browser cache and performed a Hard Reload (Ctrl+F5).

Forced "Reload Resources" in Dashboards.

Crucial Test: The ONLY way it works on PC is using a simple type: entity chip with a static icon. If I use type: template with logic (if/else), the icon becomes invisible on the PC.

Has anyone experienced this specific rendering bug on desktop browsers recently? Any help would be appreciated!

Expected Behavior

No response

Steps To Reproduce

No response

Context

- type: custom:mushroom-chips-card
  alignment: center
  chips:
    # 1. OCCUPANCY (Invisible on PC)
    - type: template
      icon: >
        {% if is_state('input_boolean.home_occupied', 'on') %} mdi:home-account
        {% elif is_state('input_boolean.home_away', 'on') %} mdi:home-export-outline
        {% else %} mdi:home-circle {% endif %}
      icon_color: white
      content: "Home"

    # 2. ALARM (Visible on PC)
    - type: template
      icon: "{{ 'mdi:security' if is_state('input_boolean.alarm_armed', 'on') else 'mdi:shield-off-outline' }}"
      icon_color: "{{ 'red' if is_state('input_boolean.alarm_armed', 'on') else 'grey' }}"
      content: "Alarm"

    # 3. DOORS (Invisible on PC)
    - type: template
      icon: mdi:door-open
      icon_color: "{{ 'white' if (states.binary_sensor | selectattr('attributes.device_class', 'eq', 'door') | selectattr('state', 'eq', 'on') | list | count > 0) else 'grey' }}"
      content: "Doors"

    # 4. LIGHTS (Visible on PC)
    - type: template
      icon: mdi:lightbulb-group
      icon_color: "{{ 'amber' if (states.light | selectattr('state', 'eq', 'on') | list | count > 0) else 'grey' }}"
      content: "Lights"

Environment

- Browser: Edge, Firefox, Chrome (latest version)
- HA Version: HA Core 2026.4.1
- Mushroom: 5.1.1

Anything else?

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions