Ah another card… I typically use all button cards at this point. Can pretty much make anything you want. I just added a FR to allow templates to return elements too. If that gets added to button-card… there would be no reason to use any other card. You could pretty much do anything you can think of. And you reduce the JS in your template because you let home assistants built in language translators do everything for you.
I managed to get these two to work independently:
- card-mod changes the icon’s color
- template-entity-row changes the icon
However, the two don’t work together. It seems like card-mod doesn’t work with template-entity-row.
Back to the drawing board …
EDIT
Yes, they do work together. I forgot to do the ol’ CTRL+F5.
1 Like
Looks good. One thing - what’s the point of having the 2nd icon (or it’s just because it’s a mock)?
I’ve just started looking at lovelace_gen after reading this topic - still yet to digest all features Thomas packed into it but it looks very interesting, will definitely give it a go (in a bid to avoid having multiple separate custom cards).
That’s telling you the last time it was opened. Current door state is displayed via the icon on the left.
so you don’t want just time, got it.
I noticed that. Cool.
Just when I thought I had found the right combination (template-entity-row and card-mod) I just discovered it lacks a feature I need. Maybe I’ve missed it, but template-entity-row doesn’t provide access to the entity’s more-info panel. I can style the entity row exactly how I want but there’s no ability to click it and reveal more-info.
Based on very recent posts here, it looks like the feature is missing and others have requested it to be added in a future version.
Looks like I’ll need to set aside template-entity-row for now and explore other options.
yeah, please add your +1 here https://github.com/thomasloven/lovelace-template-entity-row/issues/10 and hope Thomas reads this… 
I discovered the lack of more-info as well but decided to convert some of my cards anyway where it wasn’t so important or just not needed.
Yet looking forward to it as a great addition to the very useful card.
Done! Upvoted the feature request and added a comment explaining why I need it.
For anyone interested, here’s the default entity card for a climate entity, tweaked with Custom-UI (black ‘ZZZ’ icon to indicate the system is currently idling).
Here’s how I re-styled it using card-mod and template-entity-row. The icon’s appearance is the same as with Custom-UI plus I changed the data’s placement to suit my preferences.
- The information on the right represents the HVAC system’s current activity and current ambient temperature.
- The information below the entity’s name represents the HVAC system’s operating mode and setpoint temperature.
It now looks and works exactly the way I want it (spartan) but with one enormous showstopper: clicking it doesn’t open the more-info panel so there’s no way to control the thermostat. 
So very close to the desired solution yet unusable (for my needs). Back to the drawing board …
1 Like
Any chance of seeing the config before you burn it?
You can do what you want with the custom:button-card but it’s a bit more configuration.
EDIT: I’ll share a card that will work later tonight if you are interested.
The template for icon and style should probably be nearly identical but I was experimenting so icon's template is a bit different (and includes a potentially superfluous if-else).
- type: vertical-stack
cards:
- type: entities
title: Climate
show_header_toggle: false
entities:
- type: custom:template-entity-row
entity: climate.thermostat
state: "{{state_attr(config.entity, 'hvac_action') | title}} {{state_attr(config.entity, 'current_temperature')}} °C"
secondary: "{{states(config.entity) | title}} {{state_attr(config.entity, 'temperature')}} °C"
icon: >
{% if is_state(config.entity, 'off') %}
mdi:power-off
{% else %}
{% set ha = state_attr(config.entity, 'hvac_action') %}
{% set icons = { 'heating':'mdi:fire', 'cooling':'mdi:snowflake', 'auto':'mdi:autorenew', 'idle':'mdi:sleep'} %}
{{ icons[ha] if ha in icons.keys() else 'mdi:power-off' }}
{% endif %}
style: |
:host {
--paper-item-icon-color:
{% set ha = state_attr(config.entity, 'hvac_action') %}
{% set colors = { 'off':'gray', 'heating':'red', 'cooling':'blue', 'auto':'green', 'idle':'black'} %}
{{ colors[ha] if ha in colors.keys() else 'cyan' }}
;
}
1 Like
I’m almost tempted to turn HACS back on so I can browse the list of available custom cards … except I turned it off because I had no need for custom cards (i.e. UI is spartan). Anyway, ‘button-card’ has been added to my task list. Looks like I’m going to have to learn more about the available custom cards than I ever thought I would. 
Any examples you are willing to share would be appreciated.
you are aware you can simply put the climate entity in an entities card?
- type: entities
entities:
- entity: climate.kantoor
and of course customize a bit:-)
climate.kantoor:
templates:
icon_color: >
var temp = entity.attributes.current_temperature;
if (temp < -5) return 'rgb(30, 255, 255)';
if (temp < 0) return 'rgb(30, 144, 255)';
if (temp < 10) return 'rgb(255, 255, 0)';
if (temp < 15) return 'rgb(255, 211, 30)';
if (temp < 20) return 'rgb(0, 128, 0)';
if (temp < 25) return 'rgb(255, 165, 0)';
if (temp < 30) return 'rgb(255, 0, 0)';
if (temp < 35) return 'rgb(85, 0, 0)';
return 'rgb(47, 0, 0)';
icon: >
if (entity.attributes.hvac_action == 'heating') return 'mdi:fire';
return 'mdi:pause-circle';
icon_color as you can see based on inside temp.
if you want, color it on action too of course:
1 Like
That’s what I currently do on my production system which has Custom-UI installed.
climate.thermostat:
templates:
icon: >
if (state === "off") return "mdi:power-off";
if (attributes.hvac_action === "heating") return "mdi:fire";
if (attributes.hvac_action === "cooling") return "mdi:snowflake";
if (attributes.hvac_action === "auto") return "mdi:autorenew";
if (attributes.hvac_action === "idle") return "mdi:sleep";
return "mdi:power-off";
icon_color: >
if (attributes.hvac_action === "off") return "gray";
if (attributes.hvac_action === "heating") return "red";
if (attributes.hvac_action === "cooling") return "blue";
if (attributes.hvac_action === "auto") return "green";
if (attributes.hvac_action === "idle") return "black";
return "gray";
The result is this:
It’s possible to customize an entity using the configuration variables listed in the documentation. What the documentation doesn’t explain is templates. Because, based on my understanding, that’s an extension provided by Custom-UI.
On my test system, which does not have Custom-UI, this is what I tried:
climate.thermostat:
friendly_name: Thermostatus
templates:
icon: >
if (state === "off") return "mdi:power-off";
if (attributes.hvac_action === "heating") return "mdi:fire";
if (attributes.hvac_action === "cooling") return "mdi:snowflake";
if (attributes.hvac_action === "auto") return "mdi:autorenew";
if (attributes.hvac_action === "idle") return "mdi:sleep";
return "mdi:power-off";
icon_color: >
if (attributes.hvac_action === "off") return "gray";
if (attributes.hvac_action === "heating") return "red";
if (attributes.hvac_action === "cooling") return "blue";
if (attributes.hvac_action === "auto") return "green";
if (attributes.hvac_action === "idle") return "black";
return "gray";
After restarting Home Assistant, the only part of the customization that works is friendly_name. The templates section is ignored and the icon displayed is the default one for a climate entity.
yes, icon_color is only available with custom-ui. the customize documentation states what is available in core, and that is without templates…
the rest is in js only in custom-ui (frontend, browser side) or, of course with the template (binary) sensors, in jinja (backend, server side)
1 Like
===
try
==
just 2 instead of 3
climate.thermostat:
friendly_name: Thermostatus
templates:
icon: >-
if (state == "off") return "mdi:power-off";
if (attributes.hvac_action == "heating") return "mdi:fire";
if (attributes.hvac_action == "cooling") return "mdi:snowflake";
if (attributes.hvac_action == "auto") return "mdi:autorenew";
if (attributes.hvac_action == "idle") return "mdi:sleep";
return "mdi:power-off";
icon_color: >-
if (attributes.hvac_action == "off") return "gray";
if (attributes.hvac_action == "heating") return "red";
if (attributes.hvac_action == "cooling") return "blue";
if (attributes.hvac_action == "auto") return "green";
if (attributes.hvac_action == "idle") return "black";
return "gray";
jut for the fun of it we should really be using mappers, but if you don’t want that, you can also do:
icon: >
var action = entity.attributes.hvac_action;
if (state == 'off') return 'mdi:power-off';
if (action == 'heating') return 'mdi:fire';
if (action == 'cooling') return 'mdi:snowflake';
if (action == 'auto') return 'mdi:autorenew';
return 'mdi:pause-circle';
btw there’s a sublet difference between == and === , in this case the == suffices
update
couldnt resist:
var action = entity.attributes.hvac_action;
var icon = {off:'mdi:power-off',
heating:'mdi:fire',
cooling:'mdi:snowflake',
auto:'mdi:autorenew'}
return icon[action] ? icon[action] : 'mdi:pause-circle';
should do it. Note the states needn’t be quoted, only the icons. Using this in the button-card only requires the enclosing [[[ and ]]]
1 Like
Sorry, I don’t understand the point of your suggestion. It doesn’t matter if it’s == or === because the entire template is ignored if Custom-UI is not installed. That’s been the point of this exercise, to eliminate the use of Custom-UI and replace its functionality with custom cards.
In addition, the triple-equal was just something I copy-pasted from an example many, many versions ago and have left it that way ever since. I understand the variable’s type is unlikely to be anything other than string thereby making the use of triple-equals superfluous. Nevertheless, whether double or triple, it’s moot.
Not to mention == vs === is pretty much meaningless with strings that aren’t numbers.