A little help with template chips

Configuration Frontend
1

i have the next code

type: template
    picture: /local/IMG_1889-removebg-preview.png
    content: ''
    entity: person.costy
    card_mod:
      style: |
        ha-card:after {
          {% if is_state('person.costy', 'home') %}
            content: '🏠'; 
          {% elif is_state('person.costy', 'not_home') %}
            content: "💁"; 
          {% else %}
            content: "🚷"; /* mdi:account icon */
          {% endif %}
          
          font-family: 'Material Design Icons';
          position: absolute;
          display: flex;
          justify-content: center;
          align-items: center;
          font-weight: bolder;
          border-radius: 50%;
          top: -5px;
          right: -7px;
          width: 20px;
          height: 20px;
          font-size: 12px;
        }

        ha-card {
          --chip-box-shadow: none;
          --ha-card-box-shadow: none;
          --chip-border-width: 0;
        }

that will show a chip like this :
Captura de pantalla 2024-08-08 091842
but i want to put an mdi icon where the emoji is and i dont know how. A little help is welcomed

2

I think you need to:

  • remove the picture: line
  • add an icon: mdi:xxx line
3

thank you for your response but i am refering to the house emoji in the upper right corner.

4

agh, sorry.

5

as far as I k ow you can’t use badges in chips, possible like you have but you can’t use mdi icons like that again as far as I know. you could do it like this which requires Google material icons.

type: custom:mushroom-chips-card
chips:
  - type: template
    content: ''
    picture: |
      {{ state_attr('person.simon_benson', 'entity_picture') }}
    entity: person.simon_benson
    card_mod:
      style: |
        mushroom-card { 
          background: url( {{ state_attr('person.simon_benson', 'entity_picture') }} ) no-repeat 0px center;
          background-size: 42px 42px;
        }
        ha-card:after {
          content: "{% if is_state('person.simon_benson', 'home') %} house {% else %} exit_to_app {% endif %}";
          background:  {% if is_state('person.simon_benson', 'home') %} green {% else %} red {% endif %};
          color: white;
          font-family: 'Material Icons';
          position: absolute;
          display: flex;
          justify-content: center;
          align-items: center;
          font-weight: bolder;
          border-radius: 50%;
          top: -2px;
          right: -3px;
          width: 15px;
          height: 15px;
          font-size: 12px;
        }

        ha-card {
          --chip-box-shadow: none;
          --ha-card-box-shadow: none;
          --chip-border-width: 0;
        }

Screenshot_20240808_221618_Home Assistant
Screenshot_20240808_221618_Home Assistant1059×746 65.2 KB

hope this helps

6

Thank you for your response. I had tried this code before and couldn’t figure out why it wasn’t working. After a more thorough check, I realized that I hadn’t added the Material Icons font to the resources. Thank you once again.

1 Like