lovelace: add icons to the front end

A good way to get a professional looking user interface is to add high quality icons. The best way to add icons to hass.io is to use the icon database from https://materialdesignicons.com.

Figure 1. Materialdesignicons.com is an excellent source for hass.io icons.

The code for adding an icon to a custom component button card is simply.

icon: mdi:sofa

The mdi:sofa tag is found by hovering on the icon you want to add on the materialdesignicon page. There are 1000s of icons to chose from. Note that icons that were recently added to the database might not yes work, simply wait a couple of days (weeks?) for those icons to be integrated into hass.io.

The code for the button-card component including an icon.

- type: custom:button-card
  template: template_switch_slider
  custom_fields:
    slider:
      card:
        full_row: true
        hide_state: true
        type: custom:slider-entity-row
        entity: light.lounge_tak
  entity: light.lounge_tak
  name: tak
  icon: mdi:sofa

To include some more information in this post I also show how to use a coding template to modify the button-card and icon appearance. This is a good way to centralize code if you have some 50 buttons and do not want to update them all manually if you are to do changes to them.

The code in the button-card that includes the template.

template: template_switch_slider

The template itself is defined in ui-lovelace.yaml

button_card_templates:
  switch_slider:
    styles:
      card:
        - background-color: rgb(3, 169, 244)
        - box-shadow: none;
        - overflow: unset
      name:
        - color: white
      label:
        - color: yellow
      custom_fields:
        slider:
          - filter: opacity(80%)
          - overflow: unset
          - color: rgb(3, 169, 244)
      grid:
        - grid-template-areas: '"n" "i" "l" "slider"'
        - grid-template-columns: 1fr
        - grid-template-rows: min-content fr min-content min-content
    size: 40%
    state:
    - value: "off"
      styles:
        icon:
          - color: white
    - value: "on"
      styles:
        icon:
          - color: yellow
    - value: "unavailable"
      styles:
        icon:
          - color: red

  template_switch_slider:
    template: switch_slider

The button card, icon and template all comes together nicely in my Lovelace light control panel.

Figure 3. Light control panel in lovelace by using custom component button-cards.

Please let me know in the comments field if you have any questions or comments.