Can you change icon to a new icon in mushroom-chip-cards?

Configuration Frontend
1

Hello, I am building my room cards and have them largely planned out. I am stuck with figuring out how to change a mushroom chip icon from lightbulb-outline to lightbulb-on-outline. I have read a ton of articles both for mushroom cards and CSS but I’m missing something. Here is what I have so far;

roomCard

You will see a lightbulb that changes colour and that’s about as far as I’ve got.

this is the code

...
      - type: conditional
        conditions:
          - entity: switch.test
            state: 'on'
        chip:
          type: template
          icon: mdi:lightbulb-outline
          card_mod:
            style: |
              @keyframes glow { 
              0%   {color: red;}
              100% {color: yellow;}
              }
              ha-card {
               animation: glow linear alternate infinite;
               animation-duration: 2s;
              }
...

I have tried

 - type: conditional
        conditions:
          - entity: switch.test
            state: 'on'
        chip:
          type: template
          icon: mdi:lightbulb-outline
          card_mod:
            style: |
              @keyframes glow { 
              0%   {icon: mdi:lightbulb-outline;}
              100% {icon: mdi:lightbulb-on-outline;}
              }
              ha-card {
               animation: glow linear alternate infinite;
               animation-duration: 2s;
              }

If this is even possible and I imagine it is as you can do something similar in CSS (only changing a PNG not MDI icon) then I suspect I have the syntax wrong but I think I’ve reached the edges of my knowledge thus far and cant seem to find more information to help me progress. I would appreciate anyone either helping with a code correction or pointing me in the right direction in terms of knowledge.

Thanks in advance

1 Like
2

I’ve just found this link which does 95% of what I would like only its not a chip

type: custom:mushroom-light-card
entity: light.office_light
show_brightness_control: true
card_mod:
  style: |
    mushroom-shape-icon {
      {{ '--card-mod-icon: mdi:lightbulb;' if is_state(config.entity, 'on') else '--card-mod-icon: mdi:lightbulb-off;' }}
      --icon-color-disabled: rgb(var(--rgb-green));
      --shape-color-disabled: rgba(var(--rgb-green), 0.2);
    }

Ive tried various adaptations and the following works only once (when you edit the code and save)

      - type: conditional
        conditions:
          - entity: switch.wi_fi_power_strip_socket_5
            state_not: not-used
        chip:
          type: template
          icon: mdi:chat-question-outline
          card_mod:
            style: |
              ha-card {
                {{ '--card-mod-icon: mdi:lightbulb-on-outline;' 
                if is_state('switch.wi_fi_power_strip_socket_5', 'on') 
                else '--card-mod-icon: mdi:knife;' }}
                --icon-color-disabled: rgb(var(--rgb-green));
                --shape-color-disabled: rgba(var(--rgb-green), 0.2);
              }
3

Thanks to some help from the Discord channel who pointed me to some awesome documentation I had missed. Here is the working code if anyone is interested;

  - type: custom:mushroom-chips-card
    chips:
      - type: template
        entity: switch.wi_fi_power_strip_socket_5
        layout: vertical
        icon: |-
          {% if is_state(entity, 'on') %}
            mdi:lightbulb-on
          {% else %}
            mdi:lightbulb-outline
          {% endif %}
        icon_color: |-
          {% if is_state(entity, 'on') %}
            green
          {% else %}
            #6f6f6f
          {% endif %}
        card_mod:
          style:
            mushroom-shape-icon$: |
              ha-icon {
                {% if is_state(config.entity, 'on') %}
                  --icon-animation: scan 5s ease-in-out infinite;
                {% endif %}
                transform-origin: 90% 80%
              }
              @keyframes scan {
                0%, 100% { transform: rotate(20deg); }
                50% { transform: rotate(-15deg); }
              }
2 Likes
4

Would you mind sharing the code for the card? Just awesome, the card you designed.

5

Would you like to share your card’s code? :face_with_peeking_eye: It looks really nice.