Cant change icon on state change

Configuration Frontend
1

I have a button card, I have added an entity, and I want to change its icon based on state, the entity is a presence sensor, although the next code shows a light, cause I cant fake sensor state

type: custom:button-card
icon: mdi:contacts-outline
name: entrada
view_layout:
  grid-area: entrada
custom_fields:
  presencia:
    card:
      type: custom:mushroom-template-card
      primary: ""
      secondary: ""
      icon: mdi:account-circle-outline
      card_mod:
        style:
          mushroom-shape-icon$: |
            .shape {
              --icon-symbol-size: 30px;
              --icon-size: 60px;
              --shape-color: orange !important;  
              border: 2.5px outset green;
              --shape-animation: ping 2s infinite;
             }
             @keyframes ping {
               0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
               70% {box-shadow: 0 0 0 10px transparent;}
               100% {box-shadow: 0 0 0 0 transparent;}
              }
          .: |
            ha-card {
              background-color: transparent;
              border-color: transparent;
             }  
            ha-state-icon {
              color: rgba(0, 113, 45, 1);
              --card-mod-icon: >-
                {% if is_state("light.ladron_pasillo_0_enchufe_1", "on) %}
                  mdi:account-circle-outline 
                {% else %} 
                  mdi:account-circle
                {%- endif %}
             } 
  lampara:
    card: null
styles:
  card:
    - padding: 8px
    - height: 100%
    - background: var(--contrast4)
    - border-radius: 36px 6px 36px 36px
  grid:
    - grid-template-areas: |
        "n presencia"
        "temp lampara"
    - grid-template-rows: 1fr 1fr
    - grid-template-columns: 1fr 1fr
  icon:
    - color: black
    - width: 40px
  img_cell:
    - justify-self: start
    - align-self: start
    - width: 100px
    - height: 100px
    - background: rgba(255, 241, 0,0.8)
    - border-radius: 100%
    - position: absolute
    - left: 0
    - right: 0
    - margin: 55px 0 -25px -25px
  name:
    - justify-self: start
    - align-self: start
    - text-align: left
    - font-size: 16px
    - font-weight: 500
    - color: black
    - padding: 14px
  custom_fields:
    presencia:
      - align-self: end
      - justify-self: end
2

Use template in icon

type: custom:mushroom-template-card
primary: ""
secondary: ""
icon: |-
  {% if is_state("light.office_lamp_bulb", "on") %}
    mdi:account-circle-outline 
  {% else %} 
    mdi:account-circle
  {%- endif %}
icon_color: ""
card_mod:
  style:
    mushroom-shape-icon$: |
      .shape {
        --icon-symbol-size: 30px;
        --icon-size: 60px;
        --shape-color: orange !important;  
        border: 2.5px outset green;
        --shape-animation: ping 2s infinite;
       }
       @keyframes ping {
         0% {box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7);}
         70% {box-shadow: 0 0 0 10px transparent;}
         100% {box-shadow: 0 0 0 0 transparent;}
        }
    .: |
      ha-card {
        background-color: transparent;
        border-color: transparent;
       }  
      ha-state-icon {
        color: rgba(0, 113, 45, 1);
       }
1 Like
3

Worked, thank you very much.

For the non programmers, it is toooooo dificult to customize your dashs.

4

I am not a programmer either, but I have spent a lot of time here in the forum :rofl: :rofl: :rofl:

1 Like
5

well, seems we are going to organize a christmass dinner, because I am living here too. :rofl: :rofl: