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 :
but i want to put an mdi icon where the emoji is and i dont know how. A little help is welcomed
thank you for your response but i am refering to the house emoji in the upper right corner.
Frosty
August 8, 2024, 9:17pm
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;
}
hope this helps
Frosty:
Material Icons
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