Change Mushroom card icon color

[misty siren]

Hello, i was able to change the slider color, i want the fan icon color to match, but i cant seem to get it to work. Can someone tell me what i am doing wrong?

[sharp swallow]

Without trying it myself, I think the indentation for lines 19-22 need to be reduced and make it inline with line 14

Pro tip: Posting actual formatted code (and not screenshots) is preferred.

This is what I came up with: ```yaml
type: custom:mushroom-fan-card
entity: fan.tower_fan
show_percentage_control: true
show_oscillate_control: true
collapsible_controls: true
icon_animation: true
card_mod:
style:
mushroom-fan-percentage-control$: |
mushroom-slider {
--main-color: #2196f3 !important;
--bg-color: #d1eced !important;
}
mushroom-fan-oscillate-control$: |
mushroom-button {
--icon-color: #2196f3 !important;
--bg-color: #d1eced !important;
}
.: |
mushroom-shape-icon {
--icon-color: #2196f3 !important;
--shape-color: #d1eced !important;
--icon-color-disabled: deepskyblue;
--shape-color-disabled: rgba(105,105,105,0.3)
}
ha-card {
background-color: transparent;
{% if states(config.entity) == 'on'%}
border-color: #2196f3;
{% endif %}
}

[misty siren]

@sharp swallowty!

[sharp swallow]

Made a couple of changes to the code above. Changed the color of the icon when the fan is off and changed the border so it will be blue if the fan is on.

[brittle cove]

Just want to share this for future reference (In case you want to do another styling)
https://community.home-assistant.io/t/mushroom-cards-card-mod-styling-config-guide/600472

[misty siren]

i saw it. just didnt know how to link multple styling changes. was runnign into issues. could do 1 thing from there, but not more than that.

@sharp swallow is there a way to make the shape color transparent or disable /remove it?

[sharp swallow]

Sure. You can literally set it to none or transparent. ```yaml
.: |
mushroom-shape-icon {
--icon-color: #2196f3 !important;
--shape-color: transparent !important;
--icon-color-disabled: deepskyblue;
--shape-color-disabled: transparent;
}