Check out the updated animations here:
for your chip you should just be able to change it to ha-state-icon instead of ha-icon.
if you have multiple chips it may start to get more complex 
if you need more help feel free to send me a direct message
Is there a way to put 3 different types of icons in .weather iconāsmall?
secondary_info:
Because in all 3 entities only rainy.svg appears.
Hy @rhysb ,
Iām trying to apply animated icons but itās not working for me.
I tried with exactly the same code as you but nothing, the icon doesnāt move.
Do I need to do something to the icon?
Can you help me with the āsignalā icon, for example?
type: custom:mushroom-template-card
icon: mdi:wifi
icon_color: green
primary: RĆ©seau
layout: vertical
fill_container: true
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
animation: clip 2s steps(1) infinite;
}
@keyframes clip {
0% { clip-path: circle(0% at 50% 85%); }
20% { clip-path: circle(30% at 50% 85%); }
40% { clip-path: circle(55% at 50% 85%); }
60% { clip-path: circle(80% at 50% 85%); }
}
.shape {
--shape-animation: ping 2s infinite;
}
@keyframes ping {
60% { box-shadow: 0 0 0 0 rgba(var(--rgb-green), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
Thanks for your work!
Scroll up a couple of posts from the bottomā¦
Thanks! I hadnāt read the last few posts on this topicā¦
Do you have some animation for the mdi:thermometer ?
I have tried with:
ha-state-icon {
animation: charge 3s linear infinite;
}
@keyframes charge {
0%, 80% { clip-path: inset(0 0 0 0); }
10% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 84%, 34% 84%, 34% 100%, 100% 100%, 100% 0%); }
20% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 74%, 34% 74%, 34% 100%, 100% 100%, 100% 0%); }
30% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 64%, 34% 64%, 34% 100%, 100% 100%, 100% 0%); }
40% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 54%, 34% 54%, 34% 100%, 100% 100%, 100% 0%); }
50% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 44%, 34% 44%, 34% 100%, 100% 100%, 100% 0%); }
60% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 34%, 34% 34%, 34% 100%, 100% 100%, 100% 0%); }
70% { clip-path: polygon(0% 0%, 0% 100%, 34% 100%, 34% 24%, 67% 24%, 67% 24%, 34% 24%, 34% 100%, 100% 100%, 100% 0%); }
}
but itās not so good ^^
And for the pool like this one mdi:pool? Possible to animate the wave for exemple?
I havent made any animations. Just updated the ones by rhysb. So what you see is what you get. You may have to try and come up with your own idea for it.
So I managed to change the theme of my dashboard without making any changes to theme settings. I used some codes and browser mode to achieve that. My dashboard completely transforms from dark to white or from white to dark only by pressing a button. Now I can use it with any home assistant theme I want without applying changes to that theme. With the help of *browser mode you can also apply mode changes to specific device you own.
Hey all, I am looking for some suggestions or inspiration on how to display the below entity.
This entity is how much energy I have sold back to the grid on the left then on the right, is how much does that convert to in Dollar to buy back from the grid. This entity helps me keep on par with each days buy and sell.
Hi,
Iām trying to get the animated Monitor icon up and running, but somehow, nor my icon, nor my mushroom filter gets applied. Does anyone have an idea ?
devices:
subtitle: >
[[[
if (states['sensor.current_devices_on'].state == 0)
return `All devices are turned off`;
if (states['sensor.current_devices_on'].state == 1)
return `1 device is turned on`;
return `${states['sensor.current_devices_on'].state} devices are turned on`;
]]]
icon: mdi:power-plug
show_in_favorites: true
show_in_menu: false
button_badge: sensor.current_devices_on
button_label: "[[[ if (states['sensor.current_devices_on'].state == 0) return `Devices Off`; else return `${states['sensor.current_devices_on'].state} Devices On`; ]]]"
layout:
layout:
card_margin: 4px 8px 8px
margin: 0px 8px
addons:
custom:
- title: hide
cards:
- type: custom:mushroom-template-card
style: |
ha-card {
box-shadow: none;
}
icon: mdi:monitor
card_mod:
# class: hki
style: |
{% set state=states('sensor.power_26') % }
{% if state > '200' %}
mushroom-shape-icon {
# content: "";
# position: absolute;
# width: 40%;
# height: 30%;
# margin: 6%;
animation: refresh 300ms linear infinite;
}
@keyframes refresh {
0% { background: linear-gradient(180deg, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 0%, transparent 50%, transparent 100%); }
25% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 25%, transparent 100%); }
50% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 50%, transparent 100%); }
75% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 75%, transparent 100%); }
100% { background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 100%); }
}
{% endif %}
mushroom-card {
{% if is_state(switch.smart_plug_8, 'off') %}
{% else %}
filter: grayscale(80%);
{% endif %}
}
layout: vertical
entity: switch.smart_plug_8
primary: TV Group Living
secondary: |
{{ states('sensor.power_26') | round(0) }} W
tap_action:
action: toggle
Thanks in advance !
Kr,
Bart
I would highly advise to almost never do this:
card_mod:
style: |
{% if something %}
ha-card {
something: 1px;
}
ha-state-icon {
something-else: 2px;
}
{% endif %}
I can understand the temptation but it frequently doesnt behave the way you would expect.
Rather have the if for each element in css. So like this:
card_mod:
style:
ha-card {
{% if something %}
something: 1px;
{% endif %}
}
ha-state-icon {
{% if something %}
something-else: 2px;
{% endif %}
}
So in your instance:
card_mod:
# class: hki
style: |
mushroom-shape-icon {
{% set state=states('sensor.power_26') % }
{% if state > '200' %}
# content: "";
# position: absolute;
# width: 40%;
# height: 30%;
# margin: 6%;
animation: refresh 300ms linear infinite;
{% endif %}
}
@keyframes refresh {
0% { background: linear-gradient(180deg, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 0%, transparent 50%, transparent 100%); }
25% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 25%, transparent 100%); }
50% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 50%, transparent 100%); }
75% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 75%, transparent 100%); }
100% { background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 100%); }
}
Keyframes should always be independent anyway.
See if this fixes the issue 
If you have history i would rather have a little graph with bars instead for maybe a weeks time?
Hi Dimitri,
Thanks a lot for the tips & tricks, unfortunately it doesnāt work. Have no clue where to look. Maybe I need to look in my if-then-else statements for correct usage
Kr,
Bart
Hi,
Iāve got a problem with your top sticky card:
It covers up the top bar, so I cannot edit the dashboard:
without:
And covers any popup\edit windows:
Any idea whatās wrong?
Can you give an example how to use the monitor animation in a āconditionalā code, meaning, I want to have the icon animated when the power of my tv plug is above 200W
I am struggling for days with this code, but having trouble to understand how it works.
- type: custom:mushroom-template-card
icon_color: '{{ ''green'' if is_state(entity,''on'') else ''red'' }}'
icon: mdi:monitor
card_mod:
# class: hki
style:
mushroom-shape-icon$: |
{% set state = states('sensor.power_26') % }
{% if state | float > 200 %}
ha-icon: before {
content: "";
position: absolute;
width: 40%;
height: 30%;
margin: 6%;
animation: refresh 300ms linear infinite;
}
{% endif %}
@keyframes refresh {
0% { background: linear-gradient(180deg, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 0%, transparent 50%, transparent 100%); }
25% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 25%, transparent 100%); }
50% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 50%, transparent 100%); }
75% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 75%, transparent 100%); }
100% { background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(var(--rgb-{{ config.icon_color }}), 0.2) 100%); }
}
# mushroom-card {
# {% if is_state(switch.smart_plug_8,'off') %}
# filter:grayscale(80%);
# {% endif %}
# }
layout: vertical
entity: switch.smart_plug_8
primary: TV Living
secondary: |
{{ states('sensor.power_26') | round(0) }} W
tap_action:
action: toggle
I thought there was a possibility to add a ālockā to critical buttons in order to prevent unintentional pressesā¦ can anyone point me in the right direction ?
Restriction card, I use it just for that
See here for an example
i have explained this to you earlier. but really bad idea to do what you are doing with your if statements. put them inside the CSS element that you are styling.
furthermore you need to use ha-state-icon instead of ha-icon. this was changed a few months back now.
you also cant refer to ha-state-icon under mushroom-shape-icon$ anymore. you have to refer to it seperately.
You need an entity defined in your card as you code is asking for an entity
icon_color: '{{ ''green'' if is_state(entity,''on'') else ''red'' }}'
this on its own works:
type: custom:mushroom-template-card
icon_color: '{{ ''green'' if is_state(entity,''on'') else ''red'' }}'
entity: switch.office_screens
icon: mdi:monitor
card_mod:
style: |
ha-state-icon::before {
content: "";
position: absolute;
width: 40%;
height: 30%;
margin: 6%;
{% if states('sensor.total_energy_kwh') | float > 200 %}
animation: refresh 300ms linear infinite;
{% endif %}
}
@keyframes refresh {
0% { background: linear-gradient(180deg, rgba(var(--rgb-green), 0.2) 0%, transparent 50%, transparent 100%); }
25% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-green), 0.2) 25%, transparent 100%); }
50% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-green), 0.2) 50%, transparent 100%); }
75% { background: linear-gradient(180deg, transparent 0%, rgba(var(--rgb-green), 0.2) 75%, transparent 100%); }
100% { background: linear-gradient(180deg, transparent 0%, transparent 50%, rgba(var(--rgb-green), 0.2) 100%); }
}
hello everyone, iām trying to achieve a dynamic url in mushroom-template-card right now.
type: custom:mushroom-template-card
primary: '{{ states(''sensor.film_01'') }}'
secondary: ''
tap_action:
action: url
url_path: '{{ state_attr(''sensor.film_01'', ''film_url'') }}'
icon: ''
icon_color: ''
fill_container: true
multiline_secondary: true
layout: vertical
badge_icon: ''
double_tap_action:
action: none
hold_action:
action: none
badge_color: ''
picture: '{{ state_attr(''sensor.film_01'', ''picture_url'') }}'
entity: sensor.film_01
With the image it works it loads dynamically with this config, but it doesnāt want to resolve the path url. Is there a way to get redirected to the url. behind the state_attr is of course a full https:// url
How do I change this to a mushroom person card ? Having issues the indentation, thanks.
type: custom:mushroom-person-card
entity: person.steve_allam
icon_type: entity-picture
primary_info: none
secondary_info: none
card_mod:
style:
mushroom-shape-avatar$: |
.picture {
animation: ping 2s infinite;
}
@keyframes ping {
0% {
box-shadow: 0 0 5px 3px rgba(var(--rgb-green), 0.9);
}
100% {
box-shadow: 0 0 5px 15px transparent;
}
}
.: |
ha-card {
--icon-size: 72px;
}