type: custom:mushroom-entity-card
entity: sensor.shark_8_battery_level
fill_container: false
secondary_info: state
icon: |
[[[
const level = states['sensor.shark_8_battery_level'].state;
if (level >= 90) return 'mdi:battery';
if (level >= 70) return 'mdi:battery-70';
if (level >= 50) return 'mdi:battery-50';
if (level >= 30) return 'mdi:battery-30';
if (level >= 20) return 'mdi:battery-20';
return 'mdi:battery-alert';
]]]
#Change icon based on value
lyric wharf
the icon just disappear
silver elk
Two things here:
- You're trying to use the wrong language. You used JavaScript while most cards use Jinja. (The custom:button-card is one of the few cards that use JavaScript.)
- The Mushroom cards don't like to be templated. You can either use card_mod or the included custom:mushroom-template-card.
I have some examples on my Github I invite you to check out.
Mushroom template card with custom icon color and icon
And then if you want to learn a bit more about Jinja and JavaScript, I have some useful stuff written up here: Concepts
boreal prism
I'd suggest one of the custom battery cards is a better choice
https://github.com/maxwroc/battery-state-card for example
silver elk
Tinkerer It's kinda funny you mention the battery-state-card. I remember using it way back when and there was something about it that I didn't like. That's what set me on the path to learning javascript/jinja for customizing cards and getting them to do what I want. OP's code probably came from the same post that I looked at in terms of using it for icon color. (The custom:button-card handles the icons for batteries internally pretty well.)
From my examples: custom:button-card with custom icon color