Yes, you can change the Mushroom Icon with state using Card-Mod like this:
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;' }}
}
Had to change the styling a bit to get this working.
Mushroom Media Card with player name and dynamic icon:
type: custom:mushroom-media-player-card
entity: media_player.rhys_laptop_plexamp
use_media_info: true
show_volume_level: false
volume_controls:
- volume_set
- volume_mute
media_controls:
- previous
- play_pause_stop
- next
- shuffle
- repeat
icon: mdi:play
card_mod:
style: |
mushroom-state-item {
{% set media_type = state_attr(config.entity, 'media_content_type') %}
--card-mod-icon:
{% if media_type == 'tvshow' %}
mdi:television-classic
{% elif media_type == 'movie' %}
mdi:movie-open
{% elif media_type == 'music' %}
mdi:music
{% elif media_type == 'playlist' %}
mdi:music
{% else %}
mdi:play
{% endif %};
}
mushroom-state-info:before {
{% if not is_state(config.entity, 'off') and not is_state(config.entity, 'idle') %}
content: "{{ state_attr(config.entity, "friendly_name") }}";
font-size: 14px;
font-weight: bold;
{% endif %}
}
mushroom-state-info {
{% if not is_state(config.entity, 'off') and not is_state(config.entity, 'idle') %}
--card-primary-font-size: 12px;
font-weight: bold;
{% endif %}
}
Thanks a bunch, do you know if I can pass a variable to the --shape-color from a button_card template? I have --shape-color set as none in my theme and want a single menu to have the option on different colors without making seperate templates
Hi, is it possible to hide show_brightness_control, show_color_temp_control, show_color_control of the mushroom-light-card depending on the current state of the entity?
hey can you also input select mediaplayer sourceshare can you share this so that I can also use it in your map in my dashboard? thanks in advance!
Maybe, what state would you look for?
What I wish I could do is to hide those control bars when the light they are controlling is off.
Like so:
type: custom:mushroom-light-card
entity: light.table_lights
show_brightness_control: true # <- true if the entity (light.table_lights) is on, else false
show_color_temp_control: true # <- true if the entity (light.table_lights) is on, else false
show_color_control: true # <- true if the entity (light.table_lights) is on, else false
use_light_color: true
name: Table
icon: mdi:table-chair
hide_state: false
Isn’t that what Collapse controls when off already does?
You are right! I should have read that. It does exactly what I want.
Thank you 
What do you want the Chip to do?
This is because the episode art is shorter that the fade width. You can decrease the fade width if this is a problem for you.
Can you share your code and I’ll have a look.
Hello
I want to align the cards one under another. To have the icons aligned in 6 columns even in the next row I get some of them in groups.
I want to group them by room and sometimes i have 2 or 3 in group and then I can’t size them properly.
I tried but I can’t make it exactly. Can I have some tips how should I do it better?
type: horizontal-stack
cards:
- type: custom:vertical-stack-in-card
mode: vertical
title: Hol
cards:
- type: custom:vertical-stack-in-card
horizontal: true
cards:
- type: custom:mushroom-template-card
entity: light.hallway
layout: vertical
badge_icon: >-
{% if is_state('binary_sensor.motion_dinning_occupancy', 'on') %}
mdi:motion
{% elif is_state('binary_sensor.motion_dinning_occupancy', 'off')
%}
{% endif %}
badge_color: red
icon: mdi:key
icon_color: |-
{% if is_state('light.hallway', 'on') %}
amber
{% endif %}
style: |
ha-card > h1 {
padding: 2px 8px 0px;
font-size: 14px;
line-height: 30px;
#background: {% if is_state('binary_sensor.motion_dinning_occupancy','on') %} yellow {% endif %}
}
ha-card {
margin-left: 0%;
width: 40%;
#border-radius: 30px;
#border-right: {% if is_state('binary_sensor.motion_dinning_occupancy','on') %} solid 6px red {% endif %} ;
box-shadow: {% if is_state('light.hallway','on') %} 0px 0px 3px 3px var(--paper-item-icon-active-color) {% endif %} ;
#background: {% if is_state('binary_sensor.gate', 'on') %} red {% else %} white {% endif %};
}
- type: custom:vertical-stack-in-card
mode: vertical
title: Living Room
cards:
- type: custom:vertical-stack-in-card
horizontal: true
cards:
- type: custom:mushroom-template-card
entity: light.living1
layout: vertical
icon: mdi:ceiling-light
icon_color: |-
{% if is_state('light.living1', 'on') %}
amber
{% endif %}
badge_icon: >-
{% if is_state('binary_sensor.motion_living_2_occupancy', 'on') %}
mdi:motion
{% elif is_state('binary_sensor.motion_living_2_occupancy', 'off')
%}
{% endif %}
badge_color: red
- type: custom:mushroom-template-card
entity: light.living2
layout: vertical
icon: mdi:sofa
icon_color: |-
{% if is_state('light.living2', 'on') %}
amber
{% endif %}
badge_icon: >-
{% if is_state('binary_sensor.motion_living_2_occupancy', 'on') %}
mdi:motion
{% elif is_state('binary_sensor.motion_living_2_occupancy', 'off')
%}
{% endif %}
badge_color: red
- type: custom:mushroom-template-card
entity: light.shapes_c8b9
layout: vertical
icon: mdi:hexagon-multiple
icon_color: |-
{% if is_state('light.shapes_c8b9', 'on') %}
amber
{% endif %}
style: |
ha-card > h1 {
padding: 2px 8px 0px;
font-size: 14px;
line-height: 30px;
}
ha-card {
margin-left: -60%;
width: 160%;
#border-right: {% if is_state('binary_sensor.motion_living_occupancy','on') %} solid 6px red {% endif %} ;
#border-left: {% if is_state('binary_sensor.motion_living_2_occupancy','on') %} solid 6px red {% endif %} ;
box-shadow: {% if is_state('light.living_lights','on') %} 0px 0px 3px 3px var(--paper-item-icon-active-color) {% endif %} ;
#background: {% if is_state('binary_sensor.gate', 'on') %} red {% else %} white {% endif %};
}
- type: custom:vertical-stack-in-card
mode: vertical
title: Bucatarie
cards:
- type: custom:vertical-stack-in-card
horizontal: true
cards:
- type: custom:mushroom-template-card
entity: light.dinning
layout: vertical
icon: mdi:glass-cocktail
icon_color: |-
{% if is_state('light.dinning', 'on') %}
amber
{% endif %}
badge_icon: >-
{% if is_state('binary_sensor.motion_living_occupancy', 'on') %}
mdi:motion
{% elif is_state('binary_sensor.motion_living_occupancy', 'off')
%}
{% endif %}
badge_color: red
- type: custom:mushroom-template-card
entity: light.kitchen
layout: vertical
icon: mdi:silverware-fork-knife
icon_color: |-
{% if is_state('light.kitchen', 'on') %}
amber
{% endif %}
badge_icon: >-
{% if is_state('binary_sensor.motion_kitchen_occupancy', 'on') %}
mdi:motion
{% elif is_state('binary_sensor.motion_kitchen_occupancy', 'off')
%}
{% endif %}
badge_color: red
style: |
ha-card > h1 {
padding: 2px 8px 0px;
font-size: 14px;
line-height: 30px;
}
ha-card {
margin-left: 0%;
width: 100%;
#border-right: {% if is_state('binary_sensor.motion_kitchen_occupancy','on') %} solid 6px red {% endif %} ;
#border-left: {% if is_state('binary_sensor.motion_living_2_occupancy','on') %} solid 6px red {% endif %} ;
box-shadow: {% if is_state('light.kitchen_lights','on') %} 0px 0px 3px 3px var(--paper-item-icon-active-color) {% endif %} ;
#background: {% if is_state('binary_sensor.gate', 'on') %} red {% else %} white {% endif %};
}
I just installed mushroom card but none of the cards are showing up as available in the UI. Is this only available via yaml?
Have a look here. Others have had similar issues and this may help.
in Chrome you can clear the cache with CTRL + SHIF + DEL and then deleting the Browser cache for pictures an files.
then it must be shown if it is installed corectly
I need this once after every update
Using a layout card (https://github.com/thomasloven/lovelace-layout-card) should give you the flexibility/control you’d like.
Thank you. That is working. I am trying to do something like this:
card_mod:
style: |
mushroom-shape-icon {
{{ '--card-mod-icon: mdi:lightbulb-on-outline;' if state_attr(config.entity, 'brightness') | int / 254 | round (0) | int * 100 > 0 }}
{{ '--card-mod-icon: mdi:lightbulb-on-10;' if state_attr(config.entity, 'brightness') | int / 254 | round (0) | int * 100 > 10 }}
{{ '--card-mod-icon: mdi:lightbulb-on-20;' if state_attr(config.entity, 'brightness') | int / 254 | round (0) | int * 100 > 20 }}
{{ '--card-mod-icon: mdi:lightbulb-on-30;' if state_attr(config.entity, 'brightness') | int / 254 | round (0) | int * 100 > 30 }}
{{ '--card-mod-icon: mdi:lightbulb-on-40;' if state_attr(config.entity, 'brightness') | int / 254 | round (0) | int * 100 > 40 }}
{{ '--card-mod-icon: mdi:lightbulb-on-50;' if state_attr(config.entity, 'brightness') | int / 254 | round (0) | int * 100 > 50 }}
{{ '--card-mod-icon: mdi:lightbulb-on-60;' if state_attr(config.entity, 'brightness') | int / 254 | round (0) | int * 100 > 60 }}
{{ '--card-mod-icon: mdi:lightbulb-on-70;' if state_attr(config.entity, 'brightness') | int / 254 | round (0) | int * 100 > 70 }}
{{ '--card-mod-icon: mdi:lightbulb-on-80;' if state_attr(config.entity, 'brightness') | int / 254 | round (0) | int * 100 > 80 }}
{{ '--card-mod-icon: mdi:lightbulb-on-90;' if state_attr(config.entity, 'brightness') | int / 254 | round (0) | int * 100 > 90 }}
{{ '--card-mod-icon: mdi:lightbulb-on;' if state_attr(config.entity, 'brightness') | int / 254 | round (0) | int * 100 == 100 }}
{{ '--card-mod-icon: mdi:lightbulb-outline;' if is_state(config.entity, 'off') }}
}
but doesn’t work properly.