This is resolved on the front-end, yes and you’re already partially doing it by using the domainIcon function. The issue is that domainIcon is called by a higher-level function stateIcon to determine the icon used.
I think you just need to update your code to use the stateIcon function. We can add that to custom-card-helpers.
I came here to look for how to do almost exactly this. <3
Now I can skip a lot of template sensors to make the gui show device trackers for stuff at home (cameras, computers etc) and just remake the home and not_home states to show Offline or Online.
I made a custom field to show instead of regular state and added this code:
custom_fields:
state_template: >
[[[
if (states[entity.entity_id].state == "home")
return "Online";
return "Offline";
]]]
yes! @RomRider was right after all… we already have the opportunity and the custom_fields is rather an elegant way of doing so.
Out of pure nostalgia for the magnificent options of custom-ui, I’ll rename the field to:
custom_fields:
stateDisplay: >
[[[
if (states[entity.entity_id].state == "home")
return "Online";
return "Offline";
]]]
not sure if that will go, but so far so good. 
thanks!
btw, for reference, the this the grid setting to make it all happen (and if you don’t use a slider, simply take it out):
grid:
- grid-template-areas: '"i" "slider" "n" "stateDisplay"'
opposed to the default '"i" "n" "s" "l"'
might be something for the docs pages, as this could well be a much used feature cool.
I could do that this way
type: 'custom:button-card'
entity: {{ entity }}
name: entity name
show_icon: true
state:
- value: 'off'
icon: >
[[[
if (entity.attributes.device_class == 'motion')
return 'mdi:walk';
if (entity.attributes.device_class == 'door')
return 'mdi:door-closed';
]]]
- value: 'on'
icon: >
[[[
if (entity.attributes.device_class == 'motion')
return 'mdi:run';
if (entity.attributes.device_class == 'door')
return 'mdi:door-open';
]]]
Sure, but it would be more useful if the button card would handle the icons for entities with a device class attribute by it self.
Surely, but that’s a workaround until isn’t implemented
I’ll work on that soon, stay tuned 
Question: Is it possible to have 2 actions on a button press?
I know I can have a script to do both actions but before I make one I’d like to know if it is possible to do without.
Thanks for your work, since I’ve discovered the Button card my entire HA frontend looks so much better!
Hi
Wondered if any one is able to help. Trying to recreate the system monitor card.
I can get the temperature to show but as soon as i uncomment the ram, cpu and sd custom fields the hole button card disappears
Is any body able to help and see what I’ve done wrong?
Thanks
Code:
- type: custom:button-card
entity: sensor.battery_level_2
icon: 'mdi:raspberry-pi'
aspect_ratio: 1/1
name: HassOS
styles:
card:
- background-color: '#000044'
- border-radius: 10%
- padding: 10%
- color: ivory
- font-size: 10px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
grid:
- grid-template-areas: '"i temp" "n n" "cpu cpu" "ram ram" "sd sd"'
# - grid-template-areas: '"i temp" "n temp" "n n"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content min-content min-content
name:
- font-weight: bold
- font-size: 13px
- color: white
- align-self: middle
- justify-self: start
- padding-bottom: 4px
img_cell:
- justify-content: start
- align-items: start
- margin: none
icon:
- color: >
[[[
if (entity.state < 60) return 'lime';
if (entity.state >= 60 && entity.state < 80) return 'orange';
else return 'red';
]]]
- width: 70%
- margin-top: '-10%'
custom_fields:
temp:
- align-self: start
- justify-self: end
cpu:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- '--text-color-sensor': '[[[ if (states["sensor.processor_use"].state > 80) return "red"; ]]]'
ram:
- padding-bottom: 2px
- align-self: middle
- justify-self: start
- '--text-color-sensor': '[[[ if (states["sensor.memory_use_percent"].state > 80) return "red"; ]]]'
sd:
- align-self: middle
- justify-self: start
- '--text-color-sensor': '[[[ if (states["sensor.disk_use_percent"].state > 80) return "red"; ]]]'
custom_fields:
temp: |
[[[
return `<ha-icon
icon="mdi:thermometer"
style="width: 12px; height: 12px; color: yellow;">
</ha-icon><span>${entity.state}°C</span>`
]]]
# cpu: |
# [[[
# return '<ha-icon
# icon="mdi:server"
# style="width: 12px; height: 12px; color: deepskyblue;">
# </ha-icon><span>CPU: <span style="color: var(--text-color-sensor);">${states['sensor.processor_use'].state}%</span></span>'
# ]]]
# ram: |
# [[[
# return `<ha-icon
# icon="mdi:memory"
# style="width: 12px; height: 12px; color: deepskyblue;">
# </ha-icon><span>RAM: <span style="color: var(--text-color-sensor);">${states['sensor.memory_use_percent'].state}%</span></span>`
# ]]]
# sd: |
# [[[
# return `<ha-icon
# icon="mdi:harddisk"
# style="width: 12px; height: 12px; color: deepskyblue;">
# </ha-icon><span>SD: <span style="color: var(--text-color-sensor);">${states['sensor.disk_use_percent'].state}%</span></span>`
# ]]]
yeah that would really be nice, respect device_class…
great you keep improving this magnificent card!
been seeing this for a while, but because of some dark background on my buttons, didn’t really see the issue.
disabled the color, and then see it more clearly: on my iPhone, doing a more-info on hold action on buttons near the rightsize of the screen results in odd behavior, described best as the full screen pulling back (a bit like a tsunami) and quickly restoring to the front again.
This seems to have to do with the grey circle (which appears when holding) touching the right side (scrollbar)
I must touch the buttons most left side, so this circle doesn’t touch the scrollbar and then things are alright.
Doesnt happen in a desktop browser as far as I can see
Anyone else see this?
You have to use backquotes and you are using single quotes instead, that’s why.
cpu: |
[[[
return `<ha-icon
icon="mdi:server"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>CPU: <span style="color: var(--text-color-sensor);">${states['sensor.processor_use'].state}%</span></span>`
]]]
ram: |
[[[
return `<ha-icon
icon="mdi:memory"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>RAM: <span style="color: var(--text-color-sensor);">${states['sensor.memory_use_percent'].state}%</span></span>`
]]]
sd: |
[[[
return `<ha-icon
icon="mdi:harddisk"
style="width: 12px; height: 12px; color: deepskyblue;">
</ha-icon><span>SD: <span style="color: var(--text-color-sensor);">${states['sensor.disk_use_percent'].state}%</span></span>`
]]]
Also when it doesn’t work, usually it’s because your javascript is wrong, you can check the javascript console of your browser to understand what is happening, it will give you some hints 
Hi Isabella
Thanks for posting this, I’m hoping it will solve an issue I’m having trying to create a button to unlock my front door that shows the state as ‘Locked/Unlocked’.
This is the code I have so far but the button doesn’t show in lovelace with the ‘custom_fields’ code, if I remove that code it shows and works fine.
Could you please assist me to see what I have wrong?
- type: custom:button-card
style: |
ha-card {
background: var(--button-background;
border-radius: 5px;
font-family: var(--font-family);
}
aspect_ratio: 1/1
lock:
enabled: true
unlock: hold
duration: 4
exemptions:
- username: User
name: Front Door
icon: mdi:door-closed
size: 30%
styles:
card:
- padding: 10%
icon:
- margin-left: -30%
- margin-top: -15%
name:
- justify-self: start
- font-size: 15px
- font-weight: bold
custom_fields:
lock_state:
- justify-self: start
- font-size: 15px
entity: input_boolean.front_door
tap_action:
action: toggle
state:
- value: "on"
color: rgb(110,235,15)
- value: "off"
color: var(--button-off-color)
- value: "unavailable"
color: rgba(0,0,0,1)
custom_fields:
lock_state: >
[[[
if (states[input_boolean.front_door].state == "on")
return "Unlocked";
return "Locked";
]]]
I will try to remember to post the entire button later.
You are missing quotes inside the brackets:
if (states['input_boolean.front_door'].state...
Here you have it: https://pastebin.com/mcmRKAuh
I utilize lovelace_gen too, but it should be rather obvious what’s what. I think you might be missing grid for example.
Thanks very much @teachingbirds I have the state working now, the grid info will help to sort out the placement of the fields which is a bit all over the place.
can we style (the color of) the more-info circle somehow? I have several buttons with a background color which makes it almost imposible to see the circle popup, as I now discover. Had thought it simply didnt work at all, but now I have a better display, I see the circle very faintly ;-)…
would be cool if we could set the color of the circle, but I wouldn’t know which item to try.
What do you call the more-info circle? Is it the circle that appears when you hold the button down?