If you’re open to using mushroom cards I would do it like this:
type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: High
icon: mdi:fan-speed-3
layout: vertical
double_tap_action:
action: none
hold_action:
action: none
tap_action:
action: call-service
service: remote.send_command
target: {}
data:
device: bedroom_fan
command: fan_speed_3
- type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: Medium
icon: mdi:fan-speed-2
layout: vertical
double_tap_action:
action: none
hold_action:
action: none
tap_action:
action: call-service
service: remote.send_command
target: {}
data:
device: bedroom_fan
command: fan_speed_2
- type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: Low
icon: mdi:fan-speed-1
layout: vertical
double_tap_action:
action: none
hold_action:
action: none
tap_action:
action: call-service
service: remote.send_command
target: {}
data:
device: bedroom_fan
command: fan_speed_1
- type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: 'Off'
icon: mdi:fan-off
layout: vertical
double_tap_action:
action: none
hold_action:
action: none
tap_action:
action: call-service
service: remote.send_command
target: {}
data:
device: bedroom_fan
command: fan_speed_off
This will give you the following result:
The card is scaleable, so when placed in a grid, or horizontal-stack it will be smaller:
The only downside of this method is that your cards will not light up on the current speed. To fix this issue we need to address this another, but more complex way:
Step 1: Make the input_booleans:
Create 4 input_booleans:
- input_boolean.bedroom_fan_speed_off
- input_boolean.bedroom_fan_speed_1
- input_boolean.bedroom_fan_speed_2
- input_boolean.bedroom_fan_speed_3
Step 2: create the automation:
trigger:
- platform: state
entity_id:
- input_boolean.bedroom_fan_speed_1
to: "on"
id: input_boolean.bedroom_fan_speed_1
- platform: state
entity_id:
- input_boolean.bedroom_fan_speed_2
to: "on"
id: input_boolean.bedroom_fan_speed_2
- platform: state
entity_id:
- input_boolean.bedroom_fan_speed_3
to: "on"
id: input_boolean.bedroom_fan_speed_3
- platform: state
entity_id:
- input_boolean.bedroom_fan_speed_off
to: "on"
id: input_boolean.bedroom_fan_speed_off
condition: []
action:
- alias: set_fan_speed_1
if:
- condition: trigger
id:
- input_boolean.bedroom_fan_speed_1
then:
- service: remote.send_command
data:
device: bedroom_fan
command: fan_speed_1
- service: input_boolean.turn_off
target:
entity_id:
- input_boolean.bedroom_fan_speed_2
- input_boolean.bedroom_fan_speed_3
- input_boolean.bedroom_fan_speed_off
data: {}
- alias: set_fan_speed_2
if:
- condition: trigger
id:
- input_boolean.bedroom_fan_speed_2
then:
- service: remote.send_command
data:
device: bedroom_fan
command: fan_speed_2
- service: input_boolean.turn_off
target:
entity_id:
- input_boolean.bedroom_fan_speed_1
- input_boolean.bedroom_fan_speed_3
- input_boolean.bedroom_fan_speed_off
data: {}
- alias: set_fan_speed_3
if:
- condition: trigger
id:
- input_boolean.bedroom_fan_speed_3
then:
- service: remote.send_command
data:
device: bedroom_fan
command: fan_speed_3
- service: input_boolean.turn_off
target:
entity_id:
- input_boolean.bedroom_fan_speed_2
- input_boolean.bedroom_fan_speed_1
- input_boolean.bedroom_fan_speed_off
data: {}
- alias: set_fan_speed_off
if:
- condition: trigger
id:
- input_boolean.bedroom_fan_speed_off
then:
- service: remote.send_command
data:
device: bedroom_fan
command: fan_speed_3
- service: input_boolean.turn_off
target:
entity_id:
- input_boolean.bedroom_fan_speed_2
- input_boolean.bedroom_fan_speed_3
- input_boolean.bedroom_fan_speed_1
data: {}
The automation triggers on turning on the input_booleans, and executes the send command. It also turn off the other input_booleans.
Step 3: make the card
Instead of sending the command directly from the card as in my first example, we turn on the input_boolean. This will activate the script. Then we can use the input_boolean to define the icon color:
type: vertical-stack
cards:
- type: custom:mushroom-template-card
primary: ''
secondary: High
icon: mdi:fan-speed-3
layout: vertical
double_tap_action:
action: none
hold_action:
action: none
tap_action:
action: call-service
service: input_boolean.turn_on
target:
entity_id: input_boolean.bedroom_fan_speed_3
icon_color: |
{% if is_state('input_boolean.bedroom_fan_speed_3', 'on') %}
blue
{% endif %}
- type: custom:mushroom-template-card
primary: ''
secondary: Medium
icon: mdi:fan-speed-2
layout: vertical
double_tap_action:
action: none
hold_action:
action: none
tap_action:
action: call-service
service: input_boolean.turn_on
target:
entity_id: input_boolean.bedroom_fan_speed_2
icon_color: |
{% if is_state('input_boolean.bedroom_fan_speed_2', 'on') %}
blue
{% endif %}
- type: custom:mushroom-template-card
primary: ''
secondary: Low
icon: mdi:fan-speed-1
layout: vertical
double_tap_action:
action: none
hold_action:
action: none
tap_action:
action: call-service
service: input_boolean.turn_on
target:
entity_id: input_boolean.bedroom_fan_speed_1
icon_color: |
{% if is_state('input_boolean.bedroom_fan_speed_1', 'on') %}
blue
{% endif %}
- type: custom:mushroom-template-card
primary: ''
secondary: 'Off'
icon: mdi:fan-off
layout: vertical
double_tap_action:
action: none
hold_action:
action: none
tap_action:
action: call-service
service: input_boolean.turn_on
target:
entity_id: input_boolean.bedroom_fan_speed_off
icon_color: |
{% if is_state('input_boolean.bedroom_fan_speed_off', 'on') %}
blue
{% endif %}
If you install (or already have) Mushroom card you can most likely copy/paste my yaml