Thanks for the heads up on the icons.
No probs. Hey - your ‘icon’ approach worked - but the image is squished to the size of an icon… can we define the icon size?
I am searching, but this thread is bloody large eh
You can use:
icon:
value: /local/icons/fast-forward-10.png
size: 18px # whatever size you want
1 Like
Hi everyone - does the “icon_template” method work in the latest lovelace tiles/Home Assistant version?
I cannot get any of the examples here to work. Here is what my code is at now - no error, just no icon either;
- entity: switch.pioneer_mutetoggle
icon_template: >-
if (state === 'on') return 'mdi:volume-high';
return 'mdi:volume-low';
I have also tried standard Jinja templating to no effect:
- entity: switch.pioneer_mutetoggle
icon_template:
'{% if states.media_player.pioneer.attributes.is_volume_muted == false %}
mdi:volume-high
{% elif (states.media_player.pioneer.attributes.is_volume_muted == true) %}
mdi:volume-mute
{% else %}
mdi:volume-low
{% endif %}'I’m using the new version but the following works ok for me which may help. Might be worth trying double quotes and else.
templates:
label_sec: "return 'Windows: ' + entities['sensor.windows_open'].state;"
style: "return 'font-weight: bold;'"
icon: "if (state === 'on') return 'mdi:window-open'; else return 'mdi:window-closed'"
1 Like
the else is not necessary.
you could try multiline notation to prevent issues and confusion with single and double quotes:
templates:
label_sec: >
return 'Windows: ' + entities['sensor.windows_open'].state;
style: >
return 'font-weight: bold';
icon: >
if (state === 'on') return 'mdi:window-open'; return 'mdi:window-closed';
Note1: that the single quotes need to come before the ; and not after. I’ve adapted this set of templates to do so.
Note2: each line should end with a ; and I’ve added that to the final line.
Note3. It might not work in this card, then please ignore the multiline suggestion, but do follow the notes 1 and 2 
2 Likes
Has anyone been able to get Fontawesome icons working with this?
I seem to be able to use fontawesome in pretty much all other components (even the custom ones) except here
Anyone that is using lovelace and looking for this card (as it is deprecated) you might want to take a look at this card:
It pretty much does the same thing and imho even better.
1 Like
Or these drop-in replacements:
bit the bullet and transforming my HA Tiles to the new custom-tiles card for Lovelace by @rodrigodf . A lot of hard work went into the old tiles, so I am a bit careful…
seems to go well for now, there are some peculiarities, but up to now Ive been able to mitigate these with little ‘hacks’ which the plethora of possibilies of this new card holds.
One thing however won’t go, and for this I ask some assistance…
I have a set of tiles where in the previous setting, an icon would be placed next to the label. If one needed the label to go under the icon, use label_sec.
In the new custom card, using both label and icon, places the label above the icon, and, in this specific card, outside of the Tile:
old Tiles (note, this is already the lovelace tiles card):
- entity: group.plafond_spots_woonkamer
label_template: >
if (entities['sensor.spots_badge'].state !== 0) return 'Total Spots on: ' + entities['sensor.spots_badge'].state;
return 'No Spots on';
icon_template: >
if (state === 'on') return 'mdi:spotlight-beam';
return 'mdi:spotlight-beam';
style_template: >
if (state == 'on') return '--tiles-icon-color: #555B65';
return '--tiles-icon-color:#5daf35';
color_on: '#5daf35'
text_color_off: '#5daf35'
column: 1
column_span: 6
row: 1
row_span: 1
and
- entity: light.hue_ambiance_spot_1
label: ' 1'
icon: mdi:grid
style_template: >
if (state == 'on') return '--tiles-icon-color: #555B65';
return '--tiles-icon-color:#F0C209';
column: 1
column_span: 1
row: 4
row_span: 1
new card:
templates:
label: >
if (entities['sensor.spots_badge'].state !== 0) return 'Total Spots on: ' + entities['sensor.spots_badge'].state;
return 'No Spots on';
icon: >
if (state === 'on') return 'mdi:spotlight-beam';
return 'mdi:spotlight-beam';
style: >
if (state == 'on') return '--tiles-icon-color: #555B65;background-color:#5daf35';
return '--tiles-icon-color:#5daf35;--tiles-label-color:#5daf35';
column: 1
column_span: 6
row: 1
row_span: 1
and
- entity: light.hue_ambiance_spot_1
label: ' 1'
icon: mdi:grid
column: 1
column_span: 1
row: 4
row_span: 1
templates:
style: >
if (state == 'on') return '--tiles-icon-color: #555B65';
return '--tiles-icon-color:#F0C209';
please have a look what I could try, or maybe @rodrigodf would know, or maybe change this in the current card, so it will become possible again… It was there, and it is deeply missed…
the placement of the larger tiles is correct, using label_sec.
next to reinstalling above functionality, might I suggest a templating option for the card_settings, a templatable Title:
type: custom:tiles-card
card_settings:
templates:
title: >
'Mode selection: ' + entities['input_select.mode'].state;
Will see if I can file a request for that on the GitHub, thanks!
THANK YOU
This advice of yours finally got me working. For anyone else struggling to get Icon Templates working - here is a working example of a working entity (tile)
I meant to send this 26 days ago, but just realised upon my return here, that I had not actually clicked ‘reply’…
entities:
- entity: switch.pioneer_mutetoggle
templates:
icon: >-
if (state === 'on') return 'mdi:volume-high'; return 'mdi:volume-mute';
cool. glad you got it working.
fwiw, there’s no need for the dash after the multi-line chevron.
see these popping up every now and then, while there’s no doc stating their need. This would do nicely (personally I like the ‘else’ better on the second line for readability and using less screen width:
templates:
icon: >
if (state === 'on') return 'mdi:volume-high';
return 'mdi:volume-mute';
1 Like
@Mariusthvdb ah yes that is better and clearer. My reply was meant to be much further up, above all the other examples since… I can see it’s totally redundant now haha
Once thing I cannot figure out or find; how to control an image with a template…?
I have tried (among many others):
entity: device_tracker.112833888050961433
templates:
icon:
value: >
if (state === 'home') return '/local/tileimages/tracking/k.png';
return '/local/tileimages/tracking/kgrey.png';
and:
entity: device_tracker.112833888050961433
templates:
icon: >
if (state === 'home') return 'value: "/local/tileimages/tracking/k.png"';
return 'value: "/local/tileimages/tracking/kgrey.png"';
Maybe I am missing an easier way to display images? But I cannot get any images to show with “image:” instead of “icon:”
Cheers for all the assistance!
that depends a bit on which version of what HA system and custom card you are using… Lovelace or legacy Ha. I have them in all sorts, so give some pointers and I can see what you need
Ah sorry poor form on my part!
Interface: Lovelace
Custom tiles: /local/lovelace_tiles/tiles-card.js (not sure how else to ID it?)
HA version: 0.91.2
CHeers
Matt
ok, so here’s what you do for a fixed picture on an entity:
type: custom:tiles-card
card_settings:
title: Activities
columns: 4
row_height: 100px
global_settings:
icon:
size: contain
entities:
- entity: script.opstaan_direct
templates:
style: >
if (entities['input_select.activity'].state === 'Opstaan') return 'background-color: #F0C209';
return 'background-color: #555B65;filter:grayscale(75%)';
icon: /local/activities/opstaan.png
and here’s a nice template:
entities:
- entity: device_tracker.life360_name
templates:
background: >
if (state === 'home' || state === 'not_home') return 'url(\"/local/tiles/family/name_' + state + '.png\")';
return 'url(\"/local/tiles/family/name_' + entities['sensor.name_location_picture'].state + '.png\")';
style: >
if (state === 'home') return 'background-color: #008000';
if (state === 'not_home') return 'background-color: #808080';
return 'background-color: #643aac';
more_info: group.name
1 Like
Legend! So helpful - thanks mate!!
Exactly what I was after
1 Like
cool, you’re most welcome, glad to be of help.
btw, did you spot the Button card by by @RomRider ? Its not a complete replacement (yet) because it still lacks the grid option, and some advanced templating, but it has come a long way. It has super support and development speed, which is what Tiles is missing unfortunately. The above in Buttons style:
- type: custom:button-card
template: button_picture_family
entity: device_tracker.life360_name
entity_picture_template: >
if (entity.state === 'home' || entity.state === 'not_home') return '/local/tiles/family/name_' + entity.state + '.png';
return '/local/tiles/family/name_' + states['sensor.name_location_picture'].state + '.png';
tap_action:
entity: group.name
see the community for the latest: Lovelace: Button card
1 Like
Thanks, I’ll check that out - I’m getting the impression that the Custom UI Tiles interface is unlikely to remain current much longer… so I may add well familiarise myself with its replacement…!
I am trying to get a new install set up with tiles. I have tiles-card.js copied in the www folder.
Do I need an html file too? I don’t see an html file at https://github.com/rodrigofragadf/lovelace-cards/tree/master/tiles-card.