Variable in icon rotate custom button card

Installation Home Assistant OS
1

I’ve been trying to change the icon transform rotation angle from fixed value to a variable without succeed. I would like to rotate an arrow icon based on the wind angle.

Change from:
icon:
transform: rotate (90deg)
To:
icon:
transform: rotate (sensor.xxx_wind_angle.state &’deg’)

I would be greatful for any help or tips.

/anders

2

in the style inclued
transform: rotate(90deg)

2 Likes
3

Have been searching and trying out different solutions for a Sensor Card, where I’d like to rotate the icon depending on wind direction. Have succesfully rotated the icon, but haven’t succeded rotating it depending on the attribute from the weather.home entity attribute wind_bearing…

image

Not working code:

type: sensor
hours_to_show: 168
graph: line
detail: 2
entity: sensor.weather_forecast_wind_speed_ms
unit: m/s
icon: mdi:weather-windy
name: Vindstyrke
style: |
  .header .icon {
    transform: 'rotate('+state_attr('weather.home', 'wind_bearing')+'deg);'

Working:

style: |
  .header .icon {
    transform: rotate(-45deg);
4

I tried this and this works:

        style: |
          .header .icon {
            transform: rotate({{state_attr('weather.home', 'wind_bearing')}}deg);
            }
2 Likes
5

Yeah, finally found it too. Thank you though!
Have to rotate icon 270 degrees first to show correcly, when using the icon I use.

    transform: rotate({{270+state_attr('weather.home', 'wind_bearing')}}deg);