Customize tile card icon background using card-mod

Mariusthvdb · January 28, 2023, 4:14pm

coming from Mushroom Cards - Build a beautiful dashboard easily 🍄 - #5208 by Mariusthvdb where the same idea was fleshed out using mushroom, I tried the mod above on:

      type: tile
      icon: mdi:water
      name: ' '
      vertical: true
      tap_action:
        action: more-info
      hold_action:
        action: none
      double_tap_action:
        action: none
      card_mod:
        style:
          .icon-container .icon$: |
            .shape {
                background: radial-gradient(var(--card-background-color) 60%,
                            transparent calc(60% + 1px)),
                            conic-gradient(rgb(var(--rgb-{{config.icon_color}})) {{states(config.entity)}}% 0%,
                            var(--card-background-color) 0% 100%);
              }
            .shape:after {
              content: "";
              height: 100%;
              width: 100%;
              position: absolute;
              border-radius: var(--icon-border-radius);
              background: rgba(var(--rgb-{{config.icon_color}}), 0.2);
            }

but it wont work unfortunately, not does the style mentioned here:

      card_mod:
        style:
          ha-tile-icon:
            $: |
              .shape {
                  background: radial-gradient(var(--card-background-color) 60%,
                              transparent calc(60% + 1px)),
                              conic-gradient(rgb(var(--rgb-{{config.icon_color}})) {{states(config.entity)}}% 0%,
                              var(--card-background-color) 0% 100%);
                }
              .shape:after {
                content: "";
                height: 100%;
                width: 100%;
                position: absolute;
                border-radius: var(--icon-border-radius);
                background: rgba(var(--rgb-{{config.icon_color}}), 0.2);
              }

would appreciatie a sharp eye if at all possible.
thx!

btw, the flickering is horrific in the mushroom config in my setup. Maybe that is caused by another custom card, have to find that too ofc. Though I have no other card that does that

Olivier1974 · January 28, 2023, 4:30pm

This is my exact configuration, and it is working:

      - color: secondary
        type: tile
        entity: binary_sensor.tradfri_ping
        name: Passerelle TRÅDFRI
        icon: mdi:dots-vertical-circle-outline
        card_mod:
          style:
            .icon-container .icon$: |
              .shape { 
                border-radius: 15px !important;
                background: 
                  {% if is_state('binary_sensor.tradfri_ping', 'on') %}
                    linear-gradient(145deg, rgba(0,255,0,0.15), rgba(224,255,224,0.15));
                  {% else %}
                    linear-gradient(145deg, rgba(255,0,0,0.15), rgba(255,80,80,0.15));
                  {% endif %} !important;
              }

This is the result at the exact moment that I’m writing this post:

Not sure why you need the “shape:after” tag.

Mariusthvdb · January 28, 2023, 4:38pm

Thanks!
I had made a mistake, and forgot to set the main config item in my card to ‘color’ (it was stil icon_color), and also had that still in the mod…

  - entity: sensor.epson_ink_level_black
    color: black
    <<: &card
      type: tile
      icon: mdi:water
      name: ' '
      vertical: true
      tap_action:
        action: more-info
      card_mod:
        style:
          .icon-container .icon$: |
            .shape {
                background: radial-gradient(var(--card-background-color) 60%,
                            transparent calc(60% + 1px)),
                            conic-gradient(rgb(var(--rgb-{{config.color}})) {{states(config.entity)}}% 0%,
                            var(--card-background-color) 0% 100%);
              }
            .shape:after {
              content: "";
              height: 100%;
              width: 100%;
              position: absolute;
              border-radius: var(--icon-border-radius);
              background: rgba(var(--rgb-{{config.color}}), 0.2);
            }

is already coloring the icon and its background in a gradient. but I still dont get the circular border indicating the %

what I now find out, is that the card_mod doesnt even do anything…

  - entity: sensor.epson_ink_level_black
    color: black
    <<: &card
      type: tile
      icon: mdi:water
      name: ' '
      vertical: true
      tap_action:
        action: more-info

shows exactly the same…

Olivier1974 · January 28, 2023, 4:47pm

Ok, can’t help for the circular border.
You want it like a thermostat icon somehow or gauge, isn’t it?
Something like this?

Better open a new post for that I think as this one is marked as solved

iotmike · November 20, 2023, 9:56am

@arganto do you have any idee how may I change the font-size for all ha-tile-info .primary from the theme configuration file. i’m struggling for more than 10hrs.
Thanks!

Ildar_Gabdullin · November 20, 2023, 12:57pm

Avoid tagging people. See community rules.
Your question is unrelated to the thread’s topic. It is supposed to be asked here:
🔹 Card-mod - Super-charge your themes!

Vahaldor · December 9, 2023, 9:54am

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

Olivier1974 · December 9, 2023, 11:40am

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.

Vahaldor · December 9, 2023, 12:32pm

“Customize” is not make it transparent?

Olivier1974 · December 9, 2023, 1:49pm

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.

Vahaldor · December 9, 2023, 2:06pm

ok, thank you for your help

R_A_L_F · December 13, 2023, 4:37pm

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

Olivier1974 · December 13, 2023, 4:42pm

Look at the solution.
Icon background is

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

R_A_L_F · December 13, 2023, 4:50pm

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

Olivier1974 · December 13, 2023, 4:56pm

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;
      }

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 %}
      }

R_A_L_F · December 13, 2023, 4:58pm

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

Olivier1974 · December 13, 2023, 5:00pm

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

R_A_L_F · December 13, 2023, 5:03pm

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.

Ildar_Gabdullin · December 13, 2023, 5:06pm

check your templates in Dev tools → Templates

Olivier1974 · December 13, 2023, 5:24pm

TemplateSyntaxError: unexpected ‘)’