Btw, yesterday I start to do similar at the second row with additional cooker hood lights, but in mobile app is to hard, 'coz I set the main card size is --icon-size: 64px (first row I’ve is 80px), and set chip --chip-icon-size: 16px; and for mobile media is 12px, but in mobile app I’ve icons overlap. Think I need to try with ya suggestion in second row too…
If you get stuck, just message me the entire card and I’ll see if I can help.
On desktop it looks so good:
- type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
layout: vertical
entity: light.kitchen_cooker_hood_group
icon: phu:bulb-group-centura-round
icon_color: |-
{% if is_state('light.kitchen_cooker_hood_group', 'on') %}
orange
{% else %}
{% endif %}
primary: Вытяжка
secondary: |-
{% if is_state('light.kitchen_cooker_hood_group_cold', 'on') %}
Холодный
{% elif is_state('light.kitchen_cooker_hood_group_neutral', 'on') %}
Нейтральный
{% elif is_state('light.kitchen_cooker_hood_group_warm', 'on') %}
Тёплый
{% elif is_state('light.kitchen_cooker_hood_group_midnight', 'on') %}
Ночник
{% elif is_state('light.kitchen_cooker_hood_group', 'on')
and is_state('light.kitchen_cooker_hood_group_cold', 'off')
and is_state('light.kitchen_cooker_hood_group_neutral', 'off')
and is_state('light.kitchen_cooker_hood_group_warm', 'off')
and is_state('light.kitchen_cooker_hood_group_midnight', 'off') %}
Произвольный
{% else %}
{% endif %}
tap_action:
action: toggle
double_action:
action: none
hold_action:
action: more-info
vertical: true
card_mod:
style: |
ha-card {
border: none !important;
}
ha-state-icon {
{% if is_state('light.kitchen_cooker_hood_group','on') %}
animation: beat 1.3s ease-out infinite both;
transform-origin: 50% 80%;
{%- else -%}
{%- endif %}
}
@keyframes beat {
0% { transform: scale(1); }
10% { transform: scale(1.1); }
17% { transform: scale(1.05); }
33% { transform: scale(1.25); }
60% { transform: scale(1); }
}
:host {
--icon-size: 64px !important;
perspective: 900px;
}
ha-card:active {
transform: rotateX(25deg);
transform-origin: center bottom;
transition: 0s;
}
ha-card:after {
{% if is_state('light.kitchen_cooker_hood_group', 'on') %}
content: "{{ expand('light.kitchen_cooker_hood_group') | selectattr('state','eq','on') | list | count }}";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: +15px;
right: +25px;
width: 16px;
height: 16px;
font-size: 11px;
{% endif %}
}
@media screen and (max-width: 400px) {
ha-card:after {
{% if is_state('light.kitchen_cooker_hood_group', 'on') %}
content: "{{ expand('light.kitchen_cooker_hood_group') | selectattr('state','eq','on') | list | count }}";
position: absolute;
background: rgb(var(--rgb-orange));
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: +15px;
right: +10px;
width: 16px;
height: 16px;
font-size: 11px;
}
{% endif %}
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: light.kitchen_cooker_hood_group
state: 'on'
chip:
type: template
entity: light.kitchen_cooker_hood_group_cold
content_info: none
icon: mdi:sun-snowflake-variant
icon_color: |-
{% if is_state('light.kitchen_cooker_hood_group_cold', 'on') %}
amber
{% else %}
#44739e
{% endif %}
card_mod:
style: |
ha-card {
border: none;
}
@media screen and (max-width: 400px) {
ha-card {
border: none;
margin-left: -10px;
--chip-icon-size: 12px;
}
}
alignment: center
- type: conditional
conditions:
- entity: light.kitchen_cooker_hood_group
state: 'on'
chip:
type: template
entity: light.kitchen_cooker_hood_group_neutral
content_info: none
icon: mdi:theme-light-dark
icon_color: |-
{% if is_state('light.kitchen_cooker_hood_group_neutral', 'on') %}
amber
{% else %}
#44739e
{% endif %}
card_mod:
style: |
ha-card {
border: none;
margin-left: -10px;
}
@media screen and (max-width: 400px) {
ha-card {
border: none;
margin-left: -18px;
--chip-icon-size: 12px;
}
}
alignment: center
- type: conditional
conditions:
- entity: light.kitchen_cooker_hood_group
state: 'on'
chip:
type: template
entity: light.kitchen_cooker_hood_group_warm
content_info: none
icon: mdi:fire
icon_color: |-
{% if is_state('light.kitchen_cooker_hood_group_warm', 'on') %}
amber
{% else %}
#44739e
{% endif %}
card_mod:
style: |
ha-card {
border: none;
margin-left: -10px;
}
@media screen and (max-width: 400px) {
ha-card {
border: none;
margin-left: -18px;
--chip-icon-size: 12px;
}
}
alignment: center
- type: conditional
conditions:
- entity: light.kitchen_cooker_hood_group
state: 'on'
chip:
type: template
entity: light.kitchen_cooker_hood_group_midnight
content_info: none
icon: mdi:weather-night-partly-cloudy
icon_color: |-
{% if is_state('light.kitchen_cooker_hood_group_midnight', 'on') %}
amber
{% else %}
#44739e
{% endif %}
card_mod:
style: |
ha-card {
border: none;
margin-left: -10px;
}
@media screen and (max-width: 400px) {
ha-card {
border: none;
margin-left: -20px;
--chip-icon-size: 12px;
}
}
alignment: center
card_mod:
style: |
ha-card {
border: none !important;
--chip-spacing: 1px;
left: 0px;
}
card_mod:
style: |
ha-card {
border: none !important;
}
But in mobile space between chips is so short, even if set up icon size 12px is not resolving this:
It’s possible to hide one icon on mobile app?
@dimitri.landerloos Hey! I always forgot to ask u about this card and the animation of the TV/monitor, I was not able to apply it, it uses a slightly different algorithm, using ha-state-icon:before - can you explain?
- type: custom:mushroom-template-card
layout: vertical
entity: switch.kitchen_tv
icon: mdi:television
icon_color: |-
{% if is_state('switch.kitchen_tv', 'on') %}
orange
{% else %}
{% endif %}
primary: Телевизор
secondary: "{{ states('sensor.kitchen_xiaomi_tv_power_socket_power') | round(1) }} W"
tap_action:
action: toggle
double_action:
action: none
hold_action:
action: more-info
vertical: true
card_mod:
style: |
ha-card {
border: none !important;
}
ha-state-icon:before {
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%); }
}
:host {
--icon-size: 80px !important;
perspective: 900px;
}
ha-card:active {
transform: rotateX(25deg);
transform-origin: center bottom;
transition: 0s;
}
PS Unlike the monitor, the microwave animation works perfectly.
PSS As far as I understand, this has to do with the size of my icon…
I found out that this is due to the color of the icon, so the animation for some reason not appears or merges with the main color of the icon. If you specify a template in the icon, the animation stops working, if you remove the color of the icon altogether, it also stops working, if you put any fixed color without a template, everything works fine.
For example with this animation is not visible:
icon_color: |-
{% if is_state('switch.kitchen_tv', 'on') %}
orange
{% else %}
{% endif %}
I figured it out, this parameter is to blame: rgba(var(--rgb-{{ config.icon_color }}), 0.2) I need to play with it a little… 
Guys, can someone help with animation of this cookerhood?
Of this icon pack.
@keyframes air {
50% { clip-path: polygon(0 0, 100% 0, 100% 80%, 80% 80%, 50% 50%, 50% 80%, 0 80%); }
}
I tried to do something like the existing examples, but today my skills are not enough for the implementation of this. 
I wanted to imitate the rise of the air up so that these three stripes somehow dragged on the hood, later tried to make them blink at least, but it still couldn’t be fully done by me. 
I came here to seek for help because I am clueless at this point. I am using mushroom template card to display some statuses of open windows/door/lights/switches. Basically it changes icon and icon color based on if there is any entity from the domain open. Code is as follows:
square: false
type: grid
cards:
- type: custom:mushroom-template-card
primary: Dvere
secondary: >-
{{ states.binary_sensor | selectattr('state', 'eq', 'on') |
selectattr('attributes.device_class', 'eq', 'door') | list | count }}
icon: >-
{% if (states.binary_sensor | selectattr('state', 'eq', 'on') |
selectattr('attributes.device_class', 'eq', 'door') | list | count)
%}mdi:door-open{% else %}mdi:door-closed{% endif %}
multiline_secondary: false
icon_color: >-
{% if (states.binary_sensor | selectattr('state', 'eq', 'on') |
selectattr('attributes.device_class', 'eq', 'door') | list | count)
%}brown{% else %}inherit{% endif %}
tap_action:
action: navigate
navigation_path: /lovelace/otvorene-dvere
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-template-card
primary: Okná
secondary: >-
{{ states.binary_sensor | selectattr('state', 'eq', 'on') |
selectattr('attributes.device_class', 'eq', 'window') | list | count }}
icon: >-
{% if (states.binary_sensor | selectattr('state', 'eq', 'on') |
selectattr('attributes.device_class', 'eq', 'window') | list | count)
%}mdi:window-open{% else %}mdi:window-closed{% endif %}
icon_color: >-
{% if (states.binary_sensor | selectattr('state', 'eq', 'on') |
selectattr('attributes.device_class', 'eq', 'window') | list | count)
%}blue{% else %}inherit{% endif %}
tap_action:
action: navigate
navigation_path: /lovelace/otvorene-okna
hold_action:
action: none
double_tap_action:
action: none
- type: custom:mushroom-template-card
primary: Svetlá
secondary: >-
{{ states.light | rejectattr('attributes.entity_id', 'defined') |
selectattr('state', 'eq', 'on') | list | count }}
icon: >-
{% if (states.light | rejectattr('attributes.entity_id', 'defined') |
selectattr('state', 'eq', 'on') | list | count) %}mdi:lightbulb{% else
%}mdi:lightbulb-outline{% endif %}
badge_color: ''
icon_color: >-
{% if (states.light | rejectattr('attributes.entity_id', 'defined') |
selectattr('state', 'eq', 'on') | list | count) %}yellow{% else
%}inherit{% endif %}
tap_action:
action: navigate
navigation_path: /lovelace/zapnute-svetla
hold_action:
confirmation:
text: Vypnúť všetky svetlá?
action: call-service
service: light.turn_off
target:
entity_id: all
double_tap_action:
action: none
- type: custom:mushroom-template-card
primary: Prepínače
secondary: >-
{{ states.switch | rejectattr('attributes.entity_id', 'defined') |
rejectattr("entity_id", "search", "termostat") | selectattr('state', 'eq',
'on') | list | count }}
icon: >-
{% if (states.switch | rejectattr('attributes.entity_id', 'defined')
|rejectattr("entity_id", "search", "termostat") | selectattr('state',
'eq', 'on') | list | count) %}mdi:toggle-switch{% else
%}mdi:toggle-switch-off{% endif %}
multiline_secondary: false
icon_color: >-
{% if (states.switch | rejectattr('attributes.entity_id', 'defined')
|rejectattr("entity_id", "search", "termostat") | selectattr('state',
'eq', 'on') | list | count) %}green{% else %}inherit{% endif %}
tap_action:
action: navigate
navigation_path: /lovelace/zapnute-prepinace
hold_action:
action: none
double_tap_action:
action: none
columns: 2
On one HA instance, this works perfectly. On other, icon for door and windows just won’t display.
Working one:
The one that’s not working:
Taking the first one (door) as example:
The template for icon renders in template editor as mdi:door-closed
if i manually put icon as mdi:door-closed, it is displayed
It is just the template output that does not display icon ever.
I tried putting the light template in the card for door, and it does display icon. Only door/window are not showing.
I have tried recreating the card from scratch, no luck.
I read about issue not displaying some icons after updating HA to 2024.2, and I followed all instructions - redownloaded Mushroom card, removing it completely, reinstalling, restarting HA, restarting host, clearing cache on cloudflare - none of this makes any difference.
On the instance where this is working - the setup is similar. Latest HA, latest HA OS version, latest mushroom card.
Even if I access HA locally (not via cloudflare), result is the same, which makes me believe that Cloudflare is not breaking it in any way.
Can anyone advise what could be causing this?
To start your icon: and icon_color: code is incorrect by adding list. The code can be as simple as something this…
icon: |
{%- if is_state(entity, 'on') %} mdi:door-open
{% else %}
mdi:door-closed
{% endif %}
icon_color: |
{%- if is_state(entity, 'on') %} brown
{% else %}
inherit
{% endif %}
type: custom:mushroom-template-card
primary: Door
secondary: |
{%- if is_state(entity, 'on') %} Open
{% else %}
Close
{% endif %}
icon_color: |
{%- if is_state(entity, 'on') %} brown
{% else %}
inherit
{% endif %}
icon: |
{%- if is_state(entity, 'on') %} mdi:door-open
{% else %}
mdi:door-closed
{% endif %}
entity: light.bathroom_lights
I’d also suggest creating sensors for your items that you want counts on. It simplifies a lot.
Example
You can add this:
secondary: |
{{ ('sensor.lights_on') | list |count }}
if you added this to your config yaml
sensor:
- platform: template
sensors:
all_lights_on:
friendly_name: 'All Lights ON'
value_template: >
{{ states.light | rejectattr('attributes.entity_id', 'defined') | selectattr('state', 'eq', 'on') | list | count }}
Guys, I made an animation of a kitchen hood, I have a question - how in this case can I make the so-called steam/smoke and its appearance from bottom to top when it appears on the icon? So that it would be animated all the time from bottom to top.
- type: custom:mushroom-template-card
layout: vertical
icon: cil:cooker-hood-trapezoid
icon_color: |-
{% if is_state('binary_sensor.cooker_hood', 'on') %}
amber
{% else %}
{% endif %}
primary: Вытяжка
secondary: "{{ states('sensor.kitchen_cooker_hood_power_socket_power') | round(1) }} W"
tap_action:
action: toggle
double_action:
action: none
hold_action:
action: more-info
vertical: true
card_mod:
style: |
ha-card {
border: none !important;
}
ha-state-icon {
animation: air 3s ease-in-out infinite;
}
@keyframes air {
0%, 100% { clip-path: inset(0 0 0 0); }
50% { clip-path: inset(0 0 38% 0); }
}
:host {
--icon-size: 80px !important;
perspective: 900px;
ha-card:active {
transform: rotateX(25deg);
transform-origin: center bottom;
transition: 0s;
}
I am not templating this based on entity’s state, rather than listing entities from certain domain. The “list” part in icon may not be necessary, but even without it, the result is still the same.
My main question is around - why this works on one HA instance, and not on the other, even when template renders correctly in template editor.
My understanding is if the binary sensor is not templated, it’s not updating. The two that are working are lights and switches. From my perspective that is the source of your issue and what I was trying to explain.
For example switch the first card to fan from binary sensor. Everything works fine.
binary_sensor domain is not polling so Mushroom has no clue what to do.
What Mod does that icon come from?
Never mind found it
But it works fine on other HA instance.
Can you define other Ha instances?
I copied the same code from other HA where this displays just fine.
Also on this instance where it is not displayed correctly, when I put templates into template editor, they display the result just fine.
Templates are:
{% if (states.binary_sensor | selectattr('state', 'eq', 'on') | selectattr('attributes.device_class', 'eq', 'door') | list | count) %}mdi:door-open{% else %}mdi:door-closed{% endif %}
{{states.binary_sensor | selectattr('state', 'eq', 'on') | selectattr('attributes.device_class', 'eq', 'door') | list | count }}
{{states.binary_sensor | selectattr('state', 'eq', 'off') | selectattr('attributes.device_class', 'eq', 'door') | list }}
{% if (states.binary_sensor | selectattr('state', 'eq', 'on') | selectattr('attributes.device_class', 'eq', 'door') | list | count)>0 %}mdi:door-open{% else %}mdi:door-closed{% endif %}
and respective results are:
mdi:door-closed
0
[<template TemplateState(<state binary_sensor.dvere_senzor_window_door_is_open_2=off; device_class=door, friendly_name=Dvere Senzor Window/door is open @ 2024-02-27T11:56:49.789948+01:00>)>, <template TemplateState(<state binary_sensor.dvere_senzor_window_door_is_open=off; device_class=door, friendly_name=Dvere Senzor Window/door is open @ 2024-02-27T11:56:49.790014+01:00>)>]
mdi:door-closed
I posted a link above a little, but here is on: GitHub - Mariusthvdb/custom-icons: Several custom made and legacy icons, and icons collected all over the internet in 1 set, UI selectable. 
One more question about animation, I don’t understand which parameter is responsible for expanding the effect throughout the entire window in the icon? Ucan see white stripes on the sides of the animation rising up, I wanted the effect to fill this animation of the toaster completely inside.
- type: custom:mushroom-template-card
layout: vertical
entity: switch.socket
icon: mdi:toaster-oven
icon_color: red
primary: Toaster
secondary: "{{ states('sensor.power') | round(1) }} W"
tap_action:
action: toggle
double_action:
action: none
hold_action:
action: more-info
vertical: true
card_mod:
style: |
ha-card {
border: none !important;
}
ha-state-icon:before {
content: "";
position: absolute;
width: 25%;
height: 30%;
margin: 12%;
animation: cook 1s linear infinite;
}
@keyframes cook {
0%, 100% { background: linear-gradient(0deg, orange 0%, transparent 50%, transparent 100%); }
33% { background: linear-gradient(0deg, transparent 0%, orange 50%, transparent 100%); }
66% { background: linear-gradient(0deg, transparent 0%, transparent 50%, orange 100%); }
}
:host {
--icon-size: 80px !important;
perspective: 900px;
}
ha-card:active {
transform: rotateX(25deg);
transform-origin: center bottom;
transition: 0s;
}
Mushroom cards has completely transformed my dashboard 
But I saw something online where for light entities the slider appears behind the text (not below). Do any of you have an ideia how can this be done with mushroom like I saw below?
Yes it’s possible with Mushroom.
Feel free to load your code from an entity or two for advice.
This card has multiple data points on top of the slider (underlined in green)
Adjust these
width: 37%;
height: 30%;
left: 22px;
top: 30px;
card_mod:
style: |
ha-card {
border: none !important;
}
ha-state-icon:before {
content: "";
position: absolute;
width: 37%;
height: 30%;
left: 22px;
top: 30px;
animation: cook 1.5s linear infinite;
}
@keyframes cook {
0%, 100% { background: linear-gradient(0deg, orange 0%, transparent 50%, transparent 100%); }
33% { background: linear-gradient(0deg, transparent 0%, orange 50%, transparent 100%); }
66% { background: linear-gradient(0deg, transparent 0%, transparent 50%, orange 100%); }
}
:host {
--icon-size: 80px !important;
perspective: 900px;
}
ha-card:active {
transform: rotateX(25deg);
transform-origin: center bottom;
transition: 0s;
}
Thanks. This is my original code. I don’t know how to start (already have card-mod)
type: custom:mushroom-light-card
entity: light.ceiling_light
show_brightness_control: true
use_light_color: true