Background "Halo" Behind Icons - How to get rid of?

Configuration Frontend
1

Using tile cards for most of my sensor statuses, a few of them related to switch status (for lights) have this semi-transparent background behind the icon that I’d like to get rid of.

image
image254×130 4.87 KB

Is there a way to get rid of the circular green background behind the lightbulb icon? Code is exactly the same between these two tile cards, other than than one is associated with a “binary_sensor”, the other with a “switch” type entity.

For the garage door card:

    - type: tile
      entity: binary_sensor.door_garage_small_contact
      state_content:
        - state
        - last_changed
      icon: mdi:garage
      name: Small Garage Door
      card_mod:
        style: |
          ha-tile-icon {
            {% if states('binary_sensor.door_garage_small_contact') == "off" -%}
              --tile-color: lime;
            {%- else -%}
              --tile-color: red;
            {%- endif -%};
          }

For the light switch card:

    - type: tile
      entity: switch.garage_light_switch
      state_content:
        - state
        - last_changed
      icon: mdi:lightbulb
      tap_action:
        action: toggle
      card_mod:
        style: |
          ha-tile-icon {
            {% if states('switch.garage_light_switch') == "off" -%}
              --tile-color: lime;
            {%- else -%}
              --tile-color: orange;
            {%- endif -%};
          }
2

That halo is the marker that clicking there does something.

To get rid of it, go into that card’s configuration and change the “Interaction → Icon tap behaviour” to “Nothing”.

3

Not a preferable way for a person who want to keep their UI manageable.

4

I am not getting from your post if you solved your issue?

5

Thank you, this works for my use-case.

6

I added the following to my tile card yaml:

            icon_tap_action:
              action: none

image

As you can see, the background halo is now gone, perfect!

I still have tap-action set to “toggle”, so clicking anywhere in the card, including the icon, will still toggle the light which is perfect. If tap-action is set to “popup”, the popup still works even when clicking on the icon to spawn the light controls, useful for dimmer switches.

1 Like