Hi
Originally it should look like this
With the latest updates they became like the ‘Jet 1’, and with the fix you provided they became like ‘Filter’
Sadly, I am not an experienced user with the web design and web components to be able to try to debug!
Use the ‘badge_icon’. here is how I did it:
type: custom:mushroom-template-card
entity: switch.faucet
primary: Faucet
icon: '{{ ''mdi:waves'' if is_state(entity, ''on'') else ''mdi:faucet'' }}'
icon_color: '{{ ''blue'' if is_state(entity, ''on'') else ''disabled'' }}'
badge_icon: '{{ ''mdi:faucet'' if is_state(entity, ''on'') else ''none'' }}'
badge_color: '{{ ''blue'' if is_state(entity, ''on'') else ''none'' }}'
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: more-info
card_mod:
style: |
mushroom-shape-icon {
{{ '--icon-animation: clip 2s ease-out infinite;' if is_state(config.entity, 'on') }}
}
@keyframes clip {
0% {clip-path: inset(75% 0 0 0); }
100% { clip-path: inset(0 0 0 0); }
}
it’s not the badge, but the icon on the right of the card 
Hello there, I got an issue after the latest update regarding the toggle of my lights out of the browser_mod pop-up. I got the setup provided by @rhysb, with some litte animations when you click the icons of the lights:
After the update the toggle doesn’t work when I click the icon. I can switch on an dimm, etc. if I click right next to it, but thats not as expected.
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Büro
secondary: >-
{{ states('sensor.heizkorper_galerie_temperature') | round(0) }} °C | {{
states('sensor.heizkorper_galerie_humidity') | round(0) }} %
icon: mdi:desk
entity: light.buro
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Büro
content:
type: custom:auto-entities
filter:
include:
- group: light.buro
options:
type: custom:mushroom-light-card
show_brightness_control: true
layout: horizontal
tap_action:
action: toggle
use_light_color: true
show_color_temp_control: true
show_color_control: true
card_mod:
style:
mushroom-shape-icon$: |
.shape:active {
transform: scale(1.2);
}
.: >
mushroom-light-brightness-control,
mushroom-light-color-temp-control,
mushroom-light-color-control {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
opacity: 0.3;
--control-height: 66px;
--control-border-radius: var(--ha-card-border-radius, 12px);
--rgb-disabled: var(--rgb-card-background-color);
}
mushroom-state-item {
z-index: 1;
max-width: fit-content;
margin-bottom: 0px;
pointer-events: none;
}
mushroom-shape-icon {
pointer-events: auto;
}
mushroom-button {
position: absolute;
width: calc(var(--control-height) * var(--control-button-ratio)) !important;
height: var(--control-height) !important;
top: var(--spacing);
right: var(--spacing);
}
mushroom-button:nth-child(3) {
right: calc(2 *var(--spacing) + var(--control-height) * var(--control-button-ratio));
}
.actions :not(:last-child) {
margin-right: 0px !important;
}
exclude:
- domain: light
attributes:
types: browser_mod
card:
type: entities
cards: []
show_header_toggle: false
sort:
method: friendly_name
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
}
target: {}
hold_action:
action: navigate
navigation_path: dachboden
double_tap_action:
action: toggle
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''disabled'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
background: rgba(var(--rgb-primary-text-color), 0.025);
--mush-icon-size: 76px;
height: 66px;
margin-left: -18px !important;
}
- type: custom:mushroom-chips-card
chips:
- type: conditional
conditions:
- entity: binary_sensor.bewegung_flur_oben_occupancy
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:motion-sensor
- type: conditional
conditions:
- entity: binary_sensor.heizkorper_galerie_open_window
state: 'on'
chip:
type: template
icon_color: disabled
icon: mdi:window-open
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
}
card_mod:
style: |
ha-card {
--ha-card-border-width: 0;
height: 102px;
{% if is_state('light.buro', 'on') %}
background: rgba(255, 152, 0, 0.1);
{% endif %}
}
It would be nice if someone can assist me on this 
- type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: media_player.woonkamer
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: action
icon: mdi:volume-minus
- type: custom:mushroom-chips-card
chips:
- type: action
icon: mdi:volume-plus
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-height: 40px;
}
alignment: end
How can I get the + and - on the right of the card ?
Think it might be down to the line-height issue that has been mentioned earlier unfortunately.
you may just have to wait for the next mushroom update for the animations to be fixed.
i played around with the line height values and adding the below helped the animation be closer to what you had before. but it is not perfect.
type: custom:mushroom-template-card
entity: switch.pool_filter_pump
primary: Filter
icon: none
icon_color: ''
badge_color: ''
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{{'border: 4px dashed rgb(var(--rgb-green));' if is_state(config.entity, 'on') else 'border: 4px dashed rgb(var(--rgb-disabled));'}}
{{'--shape-animation: spin 2s linear infinite;' if is_state(config.entity, 'on') }}
--shape-color: none;
--icon-symbol-size: 5px;
--icon-size: 34px;
}
.: |
ha-state-icon {
line-height: 0.1rem;
{{'--icon-animation: spin 0.5s linear infinite reverse;' if is_state(config.entity, 'on') }}
border-radius: 50%;
{{'border: 8px dotted rgb(var(--rgb-red));' if is_state(config.entity, 'on') else 'border: 8px dotted rgb(var(--rgb-disabled));'}}
}
Something like this work?
type: custom:vertical-stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
entity: media_player.bedroom_chromecast
icon: mdi:speaker
primary: Google Nest
secondary: Uit
- type: vertical-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: action
icon: mdi:volume-minus
card_mod:
style: |
ha-card {
margin: 0px 0px 0px 100px;
}
- type: custom:mushroom-chips-card
chips:
- type: action
icon: mdi:volume-plus
card_mod:
style: |
ha-card {
margin: 0px 0px 0px 100px;
}
Adjust the margin to a higher value till it looks like how you want it.
keep in mind that adjusting margins it may not look nice on all display sizes.
hope this helps
Thank you Sooo much… it is working fine now.
I guess I need to re-work a lot of dashboards as I have many animations affected. strangely same animations are still working in CHIPS!
Thanks again
Honestly if i were you in terms of the animations being perfect i would wait fo the next Mushroom update. i am sure it wont be that long
Get the animations back up and running, but dont add stuff like line-height to get them to look perfect. because when the new update rolls out you will probably just have to remove it again.
This is a bug in browser_mod and Mushroom v3
There is a fix in this PR from Piitya
Mushroom was updated to 3.0.2 yesterday and fixed the icon alignment issue
Hello everyone, I’m looking for a way to change the chip color card icon when they are disabled and not active
Going from this :
To this :
I tried with card-mod, changing “mush-rgb-disabled” in theme but the chip stay black and not grey when disabled
Thank you.
Here’s the code for anyone to get inspired if needed:
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
icon: mdi:knife
icon_color: |-
{% if is_state('light.hue_color_lamp_1', 'on') %}
orange
{% endif %}
primary: Kitchen
secondary: >-
{{ states('sensor.kitchen_multi_sensor_temperature') | round(1) }}°C - {{
states('sensor.kitchen_multi_sensor_humidity')| round}}%
tap_action:
action: navigate
navigation_path: kitchen
hold_action:
action: toggle
entity: light.hue_color_lamp_1
multiline_secondary: false
fill_container: false
card_mod:
style: |
ha-card {
background :rgba(var(--rgb-primary-text-color), 0.025);
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: binary_sensor.kitchen_motion_sensor_occupancy
content_info: none
icon_color: primary
- type: template
entity: sensor.current_comsumption
icon: mdi:stove
icon_color: |-
{% set consumptiontion_level = states(entity) | float(0) %}
{% if consumptiontion_level >= 0 %}
default
{% else %}
primary
{% endif %}
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
}
card_mod:
style: |
ha-card {
height: 102px;
}
Hi. I would love to move to Mushroom for all my dashboards, but I have tons of devices (Lutron lighting, zigbee sensors, tons of elk alarm sensors), etc… Is there any way to switch to mushroom without having to manually edit the dashboards with yaml?
make a new dashboard and try this Mushroom dashboard strategy, altho to be fair you might find yourself editing out alot. very fast and easy altho like the default dashboard it’ll add just about everything you have
Just upgraded to 3.0.3 after waiting a while for the ha-icon thing to be clear. I have looked at all the examples provided here but cannot seem to get everything working.
I have a person card popup (from @rhysb ) with an animated icon for my phones battery level. With the ha-icon not working, I tried to restore the animation. I can get that to work, but in the process I somehow wreck the circle shape around the icon. Or I somehow lose the ha-card background removal. Getting all to work seems impossible 
Can someone please help me out?
type: custom:mushroom-template-card
primary: '{{ states(entity) }}%'
secondary: >
{{ 'Laden' if is_state('binary_sensor.oneplus_9pro_maarten_is_charging', 'on'
) else 'Ontladen' }}
icon: |
{% set battery_level = (states(entity) | int / 10) | round(0) | int * 10 %}
{% if battery_level == 100 %}
mdi:battery
{% elif battery_level > 0 %}
mdi:battery-{{ battery_level }}
{% else %}
mdi:battery-alert-variant-outline
{% endif %}
icon_color: |-
{% set battery_level = states(entity) | int %}
{% if battery_level > 90 %}
green
{% elif battery_level > 60 %}
light-green
{% elif battery_level > 50 %}
lime
{% elif battery_level > 40 %}
yellow
{% elif battery_level > 30 %}
amber
{% elif battery_level > 20 %}
orange
{% elif battery_level > 10 %}
deep-orange
{% else %}
red
{% endif %}
entity: sensor.oneplus_9pro_maarten_battery_level
layout: vertical
badge_icon: |-
{% if is_state('binary_sensor.oneplus_9pro_maarten_is_charging', 'on') %}
mdi:lightning-bolt
{% elif states(entity) | int < 10 %}
mdi:exclamation-thick
{% endif %}
badge_color: '{{ ''red'' if states(entity) | int < 10 else ''light-blue'' }}'
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
.shape {
/* Radial progress bar */
background: radial-gradient(var(--card-background-color) 60%,
transparent calc(60% + 1px)),
conic-gradient(var(--icon-color) {{ states(config.entity) }}% 0%,
var(--card-background-color) 0% 100%);
}
.shape:after {
/* Add back icon shape */
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: var(--icon-border-radius);
background: var(--shape-color);
}
ha-icon {
/* Icon charging animation */
{{ '--icon-animation: charge 3s linear infinite;' if is_state('binary_sensor.maarten_phone_is_charging', 'on') }}
}
@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%); }
}
.: |
ha-card {
/* Remove default card styling */
--ha-card-background: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
/* Center card on row */
width: fit-content;
margin: auto;
/* Make card non-responsive to select and pointer */
user-select: none;
pointer-events: none;
}
icon_color: |-
{{ iif(is_state(entity, 'cool'), '[116,204,244]','[56,56,56]') }}
i did it like this …
Top. This is it ! Thanks
I’d like to do exactly this but with an icon in a mushroom light card. I don’t think they support templates though.
The use case is for the icon to show the state of a motion sensor that is tied to that light.
Try like this:
type: custom:mushroom-template-card
primary: '{{ states(entity) }}%'
secondary: >
{{ 'Laden' if is_state('binary_sensor.sm_g991b_is_charging', 'on' ) else
'Ontladen' }}
icon: |
{% set battery_level = (states(entity) | int / 10) | round(0) | int * 10 %}
{% if battery_level == 100 %}
mdi:battery
{% elif battery_level > 0 %}
mdi:battery-{{ battery_level }}
{% else %}
mdi:battery-alert-variant-outline
{% endif %}
icon_color: |-
{% set battery_level = states(entity) | int %}
{% if battery_level > 90 %}
green
{% elif battery_level > 60 %}
light-green
{% elif battery_level > 50 %}
lime
{% elif battery_level > 40 %}
yellow
{% elif battery_level > 30 %}
amber
{% elif battery_level > 20 %}
orange
{% elif battery_level > 10 %}
deep-orange
{% else %}
red
{% endif %}
entity: sensor.sm_g991b_battery_level
layout: vertical
badge_icon: |-
{% if is_state('binary_sensor.sm_g991b_is_charging', 'on') %}
mdi:lightning-bolt
{% elif states(entity) | int < 10 %}
mdi:exclamation-thick
{% endif %}
badge_color: '{{ ''red'' if states(entity) | int < 10 else ''light-blue'' }}'
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
.shape {
/* Radial progress bar */
background: radial-gradient(var(--card-background-color) 60%,
transparent calc(60% + 1px)),
conic-gradient(var(--icon-color) {{ states(config.entity) }}% 0%,
var(--card-background-color) 0% 100%);
}
.shape:after {
/* Add back icon shape */
content: "";
height: 100%;
width: 100%;
position: absolute;
border-radius: var(--icon-border-radius);
background: var(--shape-color);
}
.: |
ha-state-icon {
/* Icon charging animation */
{{ '--icon-animation: charge 3s linear infinite;' if is_state('binary_sensor.sm_g991b_is_charging', 'on') }}
}
@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%); }
}
ha-card {
/* Remove default card styling */
--ha-card-background: none;
--ha-card-box-shadow: none;
--ha-card-border-width: 0;
/* Center card on row */
width: fit-content;
margin: auto;
/* Make card non-responsive to select and pointer */
user-select: none;
pointer-events: none;
}
Just change the sensors back to your phone
Thanks a lot! This indeed works. I see where I got the structure of my card-mod wrong for this now 