A different take on designing a Lovelace UI

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.


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'

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
    !include popup/sidebar_information.yaml
    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.


Okay, what error shows up in the browser console?

Edit: @andrew47 template works fine, but thetvdb blocks hotlinked images :man_shrugging:

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
                      action: none
                      - 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
                  style: |
                    :host {
                  !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
                  style: |
                    :host {
                        {% if is_state('alarm_control_panel.verisure_alarm', 'disarmed') %} mdi:shield-off-outline
                        {% else %} mdi:shield-remove-outline
                        {% endif %};
                  !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 :slight_smile:

Any other pointers? Thanks in advance!

I think you’ve found a bug, works for type: entities but not type: button open an issue

Thanks @Mattias_Persson for the inspiration, just “finished” my lovelace using the UI-editor. :slight_smile:

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…


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. :slight_smile:

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 :slight_smile: Is it possible to share your code ?

thanks @Mattias_Persson . Issue opened :+1: https://github.com/thomasloven/lovelace-card-mod/issues/143