How to combine icons?
This is an example of probably useless styling; consider it as a demo.
“Useless” - because alternative ways may be used; anyway, this is up to a user which way to choose.
Consider some device with 2 attributes.
Each attribute may be expressed by some icon.
Here there is a device with 2 attributes:
- battery level - expressed by some “battery” icon;
- “working / not working” - expressed by some “fan” icon.
This example contains 2 Entities cards:
- To select a battery level.
- To represent this device.
The 2nd Entities card has 2 rows:
- For battery level - has a hidden state label.
- For “working/not working” state.
And both rows are placed in one row.
This is achieved by this styles:
- type: entities
card_mod:
style: |
div#states {
display: grid;
}
div#states > * {
grid-row-start: 1;
grid-column-start: 1;
}
Other styles are basically to improve a presentation.
Choose your own set of colors/opacities.
Battery color is implemented by Custom UI.
The whole code is here
type: vertical-stack
cards:
- type: entities
entities:
- entity: input_number.test_level_1
name: battery level
- type: entities
card_mod:
style: |
div#states {
display: grid;
}
div#states > * {
margin: 0;
grid-row-start: 1;
grid-column-start: 1;
}
entities:
- entity: sensor.test_battery
name: ' '
card_mod:
style:
hui-generic-entity-row $: |
.text-content:not(.info) {
display: none;
}
state-badge {
opacity: 0.6 !important;
}
.: |
:host {
--mdc-icon-size: 32px;
}
- entity: input_boolean.test_boolean_2
name: some device
icon: mdi:fan
card_mod:
style:
hui-generic-entity-row $ state-badge $ ha-state-icon $ ha-icon $: |
ha-svg-icon {
{% if is_state(config.entity,'on') %}
animation: spin 3s infinite linear;
color: black;
opacity: 0.2;
{% else %}
opacity: 0.2;
{% endif %}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
BTW, a similar functionality may be used with a custom:button-card - see this example.