Customize tile card icon background using card-mod

I am trying to use the examples above to completely hide icon and the title, to keep only buttons for target temperature using climate entity but cannot reach the result. Any one with a little time to provide me with card mod code please?

using following yaml, I could achieve the following, but need to edit CSS directly to get rid of the icon background and the tiny icon.

name: ' '
icon: none

image

Please open a new thread, this is not related to my initial question.
I have an answer for you but I’ll give it in the new thread, for other people to find it when needed.

“Customize” is not make it transparent?

No, the customization was about changing the icon color, solved in post 2.
What you’re asking is to remove the title and icon completely, which is a totally different card-mod code.

ok, thank you for your help

How can I change the icon background color if the quantity is greater than 0?
This way it does not change.

Look at the solution.
Icon background is

.icon-container .icon$: |
  .shape { 
    background: something !important;
  }

Thanks, but this doesnt’ work:

type: tile
entity: sensor.Fenster_AnzahlOffeneFenster
tap_action:
  action: navigate
  navigation_path: /lovelace/fenster-turen
icon: mdi:door-sliding-lock
name: Anzahl offener Fenster/Türen
show_entity_picture: false
icon_tap_action:
  action: navigate
  navigation_path: /lovelace/fenster-turen
card-mod:
  style: 
    .icon-container .icon$: |
		.shape { 
			{% if states(config.entity) | float(0) > 0 %}
			background-color: var(--red-color);
			{% else %}  
			background-color: var(--grey-color);
			{% endif %}
		}

What am I doing wrong here? Sorry, I’m not that fit in YAML yet :frowning:

My config, working

type: tile
entity: binary_sensor.zigbee_ping
name: Passerelle Zigbee
icon: mdi:z-wave
hide_state: true
card_mod:
  style:
    .icon-container .icon$: |
      .shape { 
        background: 
          {% if is_state(config.entity, 'on') %}
            rgba(0,255,0,0.15)
          {% else %}
            rgba(255,0,0,0.15)
          {% endif %} !important;
      }

image
image

EDIT: I should write it another way (sorry Ildar_Gabdullin)

type: tile
entity: binary_sensor.zigbee_ping
name: Passerelle Zigbee
icon: mdi:z-wave
hide_state: true
card_mod:
  style:
    .icon-container .icon$: |
      .shape { 
        {% if is_state(config.entity, 'on') %}
          background: rgba(0,255,0,0.15) !important;
        {% else %}
          background: rgba(255,0,0,0.15) !important;
        {% endif %}
      }

Thanks. You are asking an on/off question. How can I compare the number to > 0?

Replace is_state(config.entity,'on')
with states(config.entity) | float(0) > 0

1 Like

Like this?

card_mod:
  style:
    .icon-container .icon$: |
      .shape { 
        background: 
          {% if states(config.entity) | float(0) > 0) %}
            rgba(0,255,0,0.15)
          {% else %}
            rgba(255,0,0,0.15)
          {% endif %} !important;
      }

This doesnt work.

check your templates in Dev tools → Templates

TemplateSyntaxError: unexpected ‘)’

Perfect, Thanks :slight_smile: