I have a feeling that it cannot load the svg files. Do I still have to install anything?
Does anyone know how to make the sidebar icons dynamic, i.e based on state value?
Usually i’d use the custom-button-card for this but it seems like we can’t use that here due to CSS formatting. I’ve tried using a conditional card to show different icons based on a state but then i lose the conditional color. I tried working around this by duplicating the color effect CSS and modifying the selector but it doesn’t work.
Unfortunately my understanding of CSS is limited so any tips on things to change or how to think about the problem would be great, i’m trying to learn but this has me stumped.
thanks!
You’re trying to show an image when button-card is expecting an (mdi) icon. Instead of icon: use entity_picture:
show_entity_picture: true
entity_picture: >
[[[
return '/local/weather/cloudy.svg'
]]]
2 Likes
damn Matt. Thank you so much!! It works now!!
1 Like
Well, I’m going to assume that you’ve copied my plex recently_downloaded template and are trying to use Sonarr Upcoming Media
You have two entries NCIS/FBI, what happens if you limit the sensor to one?
- platform: sonarr_upcoming_media
max: 1
How about adding the style to the button itself?
- type: button
icon: mdi:information-outline
tap_action:
!include popup/sidebar_information.yaml
hold_action:
action: none
style: |
ha-icon {
{% if 1 == 2 %}
color: purple !important;
{% else %}
color: yellow !important;
{% endif %}
}
Thanks for the quick reply, that’s a brilliant idea!
Is it possible to change the actual icon using style? If so could you kindly give me a hint?
For example: if the alarm is disarmed then I’d like the mdi:shield-off-outline icon. Armed home would be the mdi:shield-home-outline one and armed away mdi:shield-lock-outline
When i limited to one i get the same result.
--card-mod-icon
Okay, what error shows up in the browser console?
Edit: @andrew47 template works fine, but thetvdb blocks hotlinked images 
Oké.
I did it a dirty way and it is working for now.
I used this in the ui-lovelace.yaml;
- type: custom:upcoming-media-card
entity: sensor.sonarr_upcoming_media
tap_action:
action: none
template:
- sonarr_upcoming
- conditional_media
and get this as outcoming
Thanks Mattias. I’ve been trying to get it working but i just cant seem to understand what is going wrong.
For example, this works and sets the icon on the button:
- type: button
card_mod:
style: |
:host {
--card-mod-icon:
mdi:shield-off-outline;
}
tap_action:
!include popup/sidebar_alarm.yaml
As soon as I try templating the icon disappears (the button is still there, just without an icon):
- type: button
card_mod:
style: |
:host {
--card-mod-icon:
{% if is_state('alarm_control_panel.verisure_alarm', 'disarmed') %} mdi:shield-off-outline
{% else %} mdi:shield-remove-outline
{% endif %};
}
tap_action:
!include popup/sidebar_alarm.yaml
Verifying the template under developer options show no issues
I’m obviously missing something, moving around the semi-colon hasn’t helped 
Any other pointers? Thanks in advance!
Thanks @Mattias_Persson for the inspiration, just “finished” my lovelace using the UI-editor.
I have one little question, is there any way to make the border around the brightness addaptive based on how much brightness is set. I mean, wen it’s below 100% it fits fine but if the brightness is 100% the border is to small because of the 3 numbers…
10 Likes
Nice! I bet you can, but wouldn’t it make more sense set the style depending on the biggest possible value?
Replying to myself
1 Like
Not to take the easy way but can you point me in the right direction how i start accomplishing this.
Okay, in circle template add stroke-width="${x}" and
const x = variables.circle_input == 100 ? '0.5' : '1.5';
so, if brightness is 100% stroke set to 0.5
this method can be applied wherever
1 Like
I love your Dashboard Is it possible to share your code ?
