The answer is yes if we use
Iāll need a day to get there. Late for me CST 
UPDATEā¦got it working. Will walk you through adjusting your theme tomorrow.
In my case itās looks like this:
- type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-person-card
name: P1
entity: person.p1
icon_type: entity-picture
primary_info: state
secondary_info: false
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.p1
use_entity_picture: false
card_mod:
style: |
ha-card {
border: none
}
alignment: center
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-person-card
name: P2
entity: person.p2
icon_type: entity-picture
primary_info: state
secondary_info: false
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.p2
use_entity_picture: false
card_mod:
style: |
ha-card {
border: none
}
alignment: center
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-person-card
name: P3
entity: person.p3
icon_type: entity-picture
primary_info: state
secondary_info: false
see the difference? is_state vs is_states. is_states doesnt exist.
1 Like
sorry but i havenāt code for green icon cardā¦ itās only an image take from web
Morning all - first post 
I am building out a Climate card and trying to customise the Icon based on state. Several forums laterā¦ I am struggling with the icon section (removing this and the card works) - the Icon on the card is blank.
I have checked the states available (heat and āoffā) via the development tools - any help really apricated
type: custom:mushroom-climate-card
entity: climate.controller_boiler
name: Boiler Control
hvac_modes: []
collapsible_controls: true
show_temperature_control: false
layout: horizontal
icon_type: icon
secondary_info: state
tap_action:
action: toggle
**icon: |-**
** {% set vbl=state('climate.controller_boiler') %}**
** {% if vbl=='heat' %}**
** icon: mdi:fire**
** {% elif vbl=='off' %}**
** icon: mdi:fire-off **
** {% endif %}**
card_mod: null
style: |
ha-card {
height: 200px !important;
width: 200px;
}
mushroom-state-info$: |
.container {
--card-secondary-font-size: 10px;
--card-primary-font-size: 12px;
}
mushroom-climate-temperature-control$:
mushroom-input-number$: |
.value {
font-size: 30px; }
try:
icon: |-
{% set vbl=state('climate.controller_boiler') %}
{% if vbl=='heat' %}
mdi:fire
{% elif vbl=='off' %}
mdi:fire-off
{% endif %}
If no one has answered by tomorrow, Iāll reach out. Done for tonight or in my case this morning 
2 Likes
Hi!
Anyone knows, if exists the way to modify the cover-card to add a custom button inline with the others or change the actual behaviour of the up/down buttons to call another service (for example, set_cover_position) 
??
Okā¦ will be waiting for your guidance
Thank you
Thanks for the super quick response - unfortunately same behaviour:
(Icon just goes blank light orange).
The following works in the developer tools template
icon:|-
{% if is_state('climate.controller_boiler','heat') %}
icon: mdi:fire
{% else %}
icon: mdi:fire-off
{% endif %}
Result type: string
icon: |-
icon: mdi:fire-off
That doesnt work for a non-template card.
@careyjack-boop you will need card mod to control the the icon based on state.
so like this (replace entities with your own):
type: custom:mushroom-climate-card
entity: climate.office_heating
name: Boiler Control
hvac_modes: []
collapsible_controls: true
show_temperature_control: false
layout: horizontal
icon_type: icon
secondary_info: state
tap_action:
action: toggle
card_mod:
style:
mushroom-state-info$: |
.container {
--card-secondary-font-size: 10px;
--card-primary-font-size: 12px;
}
mushroom-climate-temperature-control$:
mushroom-input-number$: |
.value {
font-size: 30px;
}
.: |
ha-card {
height: 200px !important;
width: 200px;
}
ha-state-icon {
{% if is_state(config.entity,'heat') %}
--card-mod-icon: mdi:fire;
color: rgb(var(--rgb-deep-orange)) !important;
{% else %}
--card-mod-icon: mdi:fire-off;
color: rgb(var(--rgb-disabled));
{% endif %}
}
mushroom-shape-icon {
{% if is_state(config.entity,'heat') %}
--card-mod-icon: mdi:fire;
--shape-color: rgba(var(--rgb-deep-orange), 0.2) !important;
{% else %}
--card-mod-icon: mdi:fire-off;
--shape-color: rgba(var(--rgb-disabled), 0.2) !important;
{% endif %}
}
i added that the icon becomes grey if the heating is off.
1 Like
type: custom:mushroom-template-card
primary: ''
secondary: '{{states(''sensor.soggiorno_humidity'')}} %'
entity: sensor.soggiorno_humidity
icon: mdi:thermometer
icon_color: 'blue'
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-size: 3rem;
outline: solid 0.5rem ;
outline-offset: -0.99rem;
outline-color: rgba(255,255,255,0.1);
background:
radial-gradient(var(--card-background-color)63%, transparent 65%),
conic-gradient(rgb(var(--rgb-blue)) {{ states('sensor.soggiorno_humidity') }}% 0%, transparent 10%, rgba(var(--rgb-white),0.01) 0% 100%);
}
.shape:after {
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: 50%;
background: rgba(var(--rgb-{{ config.icon_color }}), 0.2);
}
.: |
ha-card {
width: auto;
--spacing: 8px;
padding-bottom: calc(var(--spacing) * 1.618) !important;
background-color
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 12px) * 2) !important;
margin-left: auto;
margin-right: auto;
transition: all 0s;
}
something like thisā¦ but not totally satisfied
Thanks againā¦ bit word blind 
Is it possible to blink (on/off) the badge icon?
I want to use a badge icon to indicate warm water is being used in the house. So, for example:
- no badge when only cold water
- badge when only warm water
- blinking badge when warm and cold water
Yes. have the badge appear based on the state of your sensors. then if it is being shown play this animation when both hot and cold is on.
mushroom-badge-icon {
{% if states('binary_sensor.water_hot_and_cold') == 'on' %}
animation: blink-animation 1s steps(5, start) infinite;
{% endif %}
}
@keyframes blink-animation {
to {visibility: hidden;}
}
it would go anywhere under or before your icon really:
type: custom:mushroom-template-card
icon: mdi:washing-machine
icon_color: >-
{% if is_state("switch.washing_machine", "on") %} amber {% else %} grey {%
endif %}
primary: Laundry
layout: vertical
secondary: >-
{% if is_state("switch.washing_machine", "off") %} Off {% else %} {{
states("sensor.washing_machine_washer_job_state") }} {% endif %}
entity: switch.washing_machine
tap_action:
action: more-info
card_mod:
style: |
ha-state-icon {
{% if is_states('switch.washing_machine', 'on') %}
animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
transform-origin: 50% 110%;
{% else %}
{% endif %}
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
@keyframes drum {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
}
mushroom-badge-icon {
{% if states('binary_sensor.water_hot_and_cold') == 'on' %}
animation: blink-animation 1s steps(5, start) infinite;
{% endif %}
}
@keyframes blink-animation {
to {visibility: hidden;}
}
3 Likes
Hello all,
Iām trying to get change my dashboard a little bit. I would like the gap/distance at the title a little bit smaller but canāt get it changed.
Tried making an own theme based on the mushroom and change this at my theme *.yaml :
mush-title-padding: 12px 12px 6px
mush-title-spacing: 6px
Nothing changedā¦ Other changes to this file are visible on my theme.
Tried to ad this code to the Auto Entities Card Configuration Iām using.
card_mod:
style: |
ha-card {
--mush-title-padding: 12px 12px 6px;
--mush-title-spacing: 6px;
}
But this didnāt change anything eitherā¦
Can someone maybe help me? Thanks! 
Nice work,
please add icon_tap_action: to custom:mushroom-template-card
tap_action:
action: navigate
navigation_path: /lovelace/
icon_tap_action:
** action: toggle**
double_tap_action:
action: none
hold_action:
action: none
Are you using the standard Mushroom Shadow theme with no edits?
Yes original with no edits
Ok create a new file named mushroom-square-shadow2.yaml in the same folder as the original theme file.
Add the following to the new file. Execute Home Assistant Frontend: Reload themes in the Developer tools and the log out and log back in. Choose the new theme.
Mushroom Square Shadow2:
card-mod-theme: Mushroom Square Shadow2
card-mod-card: |
ha-card {
border: none !important;
background-color: none !important;
--card-secondary-line-height: 9px !important;
--card-secondary-font-size: 9px !important;
}
ha-card-box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.16)
ha-card-border-width: 0
mush-icon-border-radius: 6px
mush-control-border-radius: 6px
ha-card-border-radius: 6px
modes:
light: {}
dark: {}
**You have to create the new theme, because the original Mushroom Themes get overwritten with updates.
Results
1 Like