you will need to have something that decides whether the icon is colored. that is what the input boolean is for. so then you just have a check to see if input boolean is on and if so color the icon.
not entirely sure what you mean by show a card via local_conditional_card. can you try and elaborate?
Vedi questo per local conditional card
the color resolves easily if you managed to get a status from the conditional card.
You are going to have to give me more details on exactly what you are trying to accomplish for me to help. based on your initial description i understood that what i provided solved your problem, as it navigates through multiple pages in lovelace + colors the icon.
You will need to explain the reason why you need the local conditional card.
I’ll explain better.
So, using the conditional card I linked before, it allows me to “simulate” navigation between pages but keeping the navigation bar at the bottom and the information card above.
If you see in the link I put above, those cards can appear and disappear by tapping on the icon and then deciding what to see from the popup menu of the navigation bar.
I hope I explained it well 
Ah i see. if you navigate with the normal lovelace navigation does the nav bar not stay? why do you need to simulate navigating between pages?
No, if you navigate between pages, it’s like going to a new dashboard with more tabs.
But you can make navigation work, except that when I have a certain tab shown, it highlights in the popup menu which tab I’m seeing.
Could you share your code for the top part of your dashboard with the users and weather info in it?
I’m trying to accomplish something similar without luck.
Thanks 
Trying to create a very compact EV charging card. Quite happy with the functionality but still struggling a bit with positioning the 2 play/stop buttons on the right in the stack in card. Also on mobile the text "EV disconnected’ is truncated while there seems enough space before the play button.
Ideally I also have the badge blinking when actually charging but no idea how I can get that working with this badge.
Suggestions welcome
Code:
type: custom:stack-in-card
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-template-card
primary: |
{{ states("sensor.myenergi_zappi_plug_status") }}
icon: >
{% set battery_level = (states('sensor.t_616_rz_state_of_charge') |
int / 10) | round(0) | int * 10 %}
{% if is_state('sensor.myenergi_zappi_status', 'Charging' ) %}
{% if battery_level > 0 %}
mdi:battery-charging-{{ battery_level }}
{% else %}
mdi:battery-charging-outline
{% endif %}
{% else %}
{% if battery_level == 100 %}
mdi:battery
{% elif battery_level > 0 %}
mdi:battery-{{ battery_level }}
{% else %}
mdi:battery-alert-variant-outline
{% endif %}
{% endif %}
icon_color: |-
{% set bl = states("sensor.t_616_rz_state_of_charge") | int %}
{% if bl < 10 %} red
{% elif bl < 20 %} red
{% elif bl < 30 %} red
{% elif bl < 40 %} orange
{% elif bl < 50 %} orange
{% elif bl < 60 %} orange
{% elif bl < 70 %} green
{% elif bl < 80 %} green
{% elif bl < 90 %} green
{% elif bl < 100 %} green
{% elif bl == 100 %} green
{% else %} grey
{% endif %}
secondary: >
{{ states("sensor.myenergi_zappi_status") }} {{
states("sensor.myenergi_zappi_power_ct_internal_load") }}W
entity: sensor.myenergi_zappi_plug_status
layout: horizontal
fill_container: true
tap_action:
action: more-info
card_mod:
style: |
@keyframes blink {
50% {opacity: 0;}
}
ha-state-icon:after {
content: "{{states('sensor.t_616_rz_state_of_charge')}}%";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: {% if is_state('switch.ev_smart_charging_ev_connected', 'off') %}
rgb(var(--rgb-red)) {% else %} rgb(var(--rgb-green)) {% endif %};
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 18px;
height: 18px;
font-size: 8px;
}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
fill_container: true
layout: vertical
icon: mdi:play
entity: button.ev_smart_charging_manually_start_charging
icon_color: >
{% if is_state('switch.ev_smart_charging_ev_connected', 'on') %} {%
endif %}
tap_action:
action: toggle
card_mod:
style: |
:host {
margin-right: -160px !important;
- type: custom:mushroom-template-card
primary: ''
secondary: ''
fill_container: true
layout: vertical
icon: mdi:stop
entity: button.ev_smart_charging_manually_stop_charging
icon_color: >
{% if is_state('switch.ev_smart_charging_ev_connected', 'on') %} {%
endif %}
tap_action:
action: toggle
card_mod:
style: |
:host {
margin-right: -20px !important;
is it possible to insert two sensors in the same chips card? i have try to insert temperature and humidity sensor, but i wrong something. And how i insert the relative icon?
type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.temperatura_interna
content: '{{ states(entity) | float | round(1) }}°C | {{ states('sensor.umidita_interna') | float | round(1) }}°'
Simple answer. no you cant.
but you can have both the states in the content field like you are showing either like this:
type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.lounge_downstairs_temperature
content: |-
{{ states(entity) | float | round(1) }}°C | {{ states('sensor.lounge_downstairs_humidity') | float | round(1) }}°
or like this:
type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.lounge_downstairs_temperature
content: '{{ states(entity) | float | round(1) }}°C | {{ states(''sensor.lounge_downstairs_humidity'') | float | round(1) }}°'
you were just missing some internal quotes on yours 
you cant have multiple icons.
but you can also insert emojis in your content if you want instead.
'🌡️{{ states(entity) | float | round(1) }}°C | 💧{{ states(''sensor.lounge_downstairs_humidity'') | float | round(1) }}°'
it is perfect!
type: custom:mushroom-chips-card
chips:
- type: template
entity: sensor.temperatura_interna
content: >-
🌡️ {{ states(entity) | float | round(1) }}°C|💧{{
states('sensor.umidita_interna') | float | round(1) }}%
icon: mdi:home
i have add the icon before the sensor! thank you very much, I tried for 6 hours before asking for help.
Hey sure, this is actually the final one. Then when I finish the navigation bar I will use the 5 buttons with the icons to launch the scenes.
I share the code later.
I came up with this animation for the “net” icon when there is a device that got disconnected.
type: custom:mushroom-template-card
secondary: Network
icon: mdi:lan
icon_color: cyan
tap_action:
action: none
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-animation: ping 1.5s infinite;
}
@keyframes ping {
0% { box-shadow: 0 0 0px 0px rgba(var(--rgb-red), 0.9); }
50% { box-shadow: 0 0 5px 15px transparent; }
100% { box-shadow: 0 0 0px 0px transparent; }
}
.: |
ha-state-icon {
animation: net steps(1) 1.5s infinite;
}
@keyframes net {
0% { clip-path: inset(0 0 0 0); }
25% { clip-path: polygon(0% 0%, 0% 100%, 25% 100%, 25% 5%, 75% 5%, 74% 40%, 25% 40%, 25% 100%, 100% 100%, 100% 0%); }
37% { clip-path: inset(0 0 0 0); }
50% { clip-path: polygon(0% 0%, 0% 100%, 10% 100%, 10% 60%, 50% 60%, 50% 95%, 10% 95%, 10% 100%, 100% 100%, 100% 0%); }
62% { clip-path: inset(0 0 0 0); }
75% { clip-path: polygon(0% 0%, 0% 100%, 50% 100%, 50% 60%, 90% 60%, 90% 95%, 50% 95%, 50% 100%, 100% 100%, 100% 0%); }
87% { clip-path: inset(0 0 0 0); }
}
See if that helps.
type: custom:stack-in-card
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: minmax(0, 1fr)
grid-template-rows: auto
grid-template-areas: |
"a b"
cards:
- type: horizontal-stack
view_layout:
grid-area: a
cards:
- type: custom:mushroom-template-card
primary: |
{{ states("sensor.myenergi_zappi_plug_status") }}
icon: >
{% set battery_level = (states('sensor.t_616_rz_state_of_charge')
| int / 10) | round(0) | int * 10 %}
{% if is_state('sensor.myenergi_zappi_status', 'Charging' ) %}
{% if battery_level > 0 %}
mdi:battery-charging-{{ battery_level }}
{% else %}
mdi:battery-charging-outline
{% endif %}
{% else %}
{% if battery_level == 100 %}
mdi:battery
{% elif battery_level > 0 %}
mdi:battery-{{ battery_level }}
{% else %}
mdi:battery-alert-variant-outline
{% endif %}
{% endif %}
icon_color: |-
{% set bl = states("sensor.t_616_rz_state_of_charge") | int %}
{% if bl < 10 %} red
{% elif bl < 20 %} red
{% elif bl < 30 %} red
{% elif bl < 40 %} orange
{% elif bl < 50 %} orange
{% elif bl < 60 %} orange
{% elif bl < 70 %} green
{% elif bl < 80 %} green
{% elif bl < 90 %} green
{% elif bl < 100 %} green
{% elif bl == 100 %} green
{% else %} grey
{% endif %}
secondary: >
{{ states("sensor.myenergi_zappi_status") }} {{
states("sensor.myenergi_zappi_power_ct_internal_load") }}W
entity: sensor.myenergi_zappi_plug_status
layout: horizontal
fill_container: true
tap_action:
action: more-info
card_mod:
style: |
@keyframes blink {
50% {opacity: 0;}
}
ha-card {
padding: 0px !important;
margin: 0px !important;
border: none;
background: none;
}
ha-state-icon:after {
content: "{{states('sensor.t_616_rz_state_of_charge')}}%";
position: absolute;
display: flex;
justify-content: center;
align-items: center;
background: {% if is_state('switch.ev_smart_charging_ev_connected', 'off') %}
rgb(var(--rgb-red)) {% else %} rgb(var(--rgb-green)) {% endif %};
color: var(--card-background-color);
font-weight: bolder;
border-radius: 50%;
top: -5px;
right: -5px;
width: 18px;
height: 18px;
font-size: 8px;
}
- type: horizontal-stack
view_layout:
grid-area: b
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: ''
fill_container: true
layout: vertical
icon: mdi:play
entity: button.ev_smart_charging_manually_start_charging
icon_color: >
{% if is_state('switch.ev_smart_charging_ev_connected', 'on') %}
{% endif %}
tap_action:
action: toggle
card_mod:
style: |-
ha-card {
padding: 0px !important;
border: none;
background: none;
}
- type: custom:mushroom-template-card
primary: ''
secondary: ''
fill_container: true
layout: vertical
icon: mdi:stop
entity: button.ev_smart_charging_manually_stop_charging
icon_color: >
{% if is_state('switch.ev_smart_charging_ev_connected', 'on') %}
{% endif %}
tap_action:
action: toggle
card_mod:
style: |-
ha-card {
padding: 0px !important;
border: none;
background: none;
}
card_mod:
style: |-
ha-card {
padding: 0px !important;
border: none;
}
Is it possible increase the size font with card mod?
Yes, take a look at my guide below:
Look at text styling section of whatever card you want to change the font size of.
Hey everyone,
I am wanting to replicate something similar to the “entity-filter” in Home Assistant using Chips. I’d like to have a chip for every light that is turned on, or a fan that is on, or a door that is open. I know that I can use expand to expand a group, but how would I generate a chip for each returned entity with the correct state? Anyone have any ideas?
You can use auto entities for that. Here is a card that returns a chip for every sensor entity that has the word battery and office in the entity id.
type: custom:auto-entities
card:
type: custom:mushroom-chips-card
card_param: chips
filter:
template: >-
{%- for state in states.sensor | selectattr('entity_id','search','battery')
| selectattr('entity_id','search','office') -%}
{{
{
'type': 'entity',
'entity': state.entity_id
}
}},
{%- endfor %}
sort:
method: state
numeric: true
count: 10
Hello Guys! Anyone an idea how i can achieve this?
Post your yaml please