Oh-icon - variable height/width not working in chrome

Setup, Configuration and Use Widgets
1

Hi, I’m trying to place an oh-icon in my widget with the same height as a simple ‘oh-button’. This works perfectly in firefox with

- component: oh-icon
  config:
    icon: if:simple-icons:spotify
    height: calc(var(--f7-button-height) - var(--f7-button-border-width, 0) * 2)
    color: var(--f7-button-fill-bg-color, var(--f7-theme-color))

But in chrome-based browsers, including the android app, the icon size (width & height) is always set to 100%. No difference, if I use the above or just height: var(--f7-button-height) (setting it to a fixed size such as 28px works though).
Any idea how to fix this?

Full widget code:

uid: widget_card_spotify
tags: []
props:
  parameters:
  parameterGroups: []
timestamp: Sep 16, 2023, 11:05:01 PM
component: f7-card
config:
  style:
    background-image: ="url('"+items['Spotify_Albumcover_Url'].state+"')"
    background-size: cover
    background-position-y: center
slots:
  default:
    - component: f7-card-content
      config:
        style:
          backdrop-filter: brightness(50%)
          border-radius: var(--f7-card-border-radius)
      slots:
        default:
          - component: f7-row
            slots:
              default:
                - component: oh-icon
                  config:
                    icon: if:simple-icons:spotify
                    height: calc(var(--f7-button-height) - var(--f7-button-border-width, 0) * 2)
                    color: var(--f7-button-fill-bg-color, var(--f7-theme-color))
                - component: oh-button
                  config:
                    text: =items['Spotify_Wiedergabegeraet'].state
                    fill: true
                    round: true
                    action: options
                    actionItem: Spotify_Geraete_Aktiv
          - component: f7-row
            slots:
              default:
                - component: f7-col
                  slots:
                    default:
                      - component: f7-row
                        slots:
                          default:
                            - component: Label
                              config:
                                text: =items['Spotify_Titel'].state
                                style:
                                  color: white
                                  font-weight: 800
                                  padding: 20px 0px 0px 0px
                      - component: f7-row
                        slots:
                          default:
                            - component: Label
                              config:
                                text: =items['Spotify_Kuenstler'].state
                                style:
                                  color: white
                                  font-weight: 600
                                  padding: 2px 0px 0px 0px
                - component: f7-col
                  config:
                    style:
                      position: relative
                      height: 64px
                  slots:
                    default:
                      - component: oh-link
                        config:
                          action: command
                          actionItem: Spotify_Fernbedienung
                          actionCommand: '=(items["Spotify_Fernbedienung"].state=="PLAY") ? "PAUSE": "PLAY"'
                          style:
                            position: absolute
                            right: 0
                            bottom: 0
                            height: 40px
                            width: 40px
                            background: var(--f7-button-fill-bg-color,var(--f7-theme-color))
                            border-radius: 20px
                        slots:
                          default:
                            - component: oh-icon
                              config:
                                icon: '=(items["Spotify_Fernbedienung"].state=="PLAY") ? "if:mdi:pause": "if:mdi:play"'
                                height: 28px
                                color: white
          - component: f7-row
            config:
              style:
                padding: 12px 0px 0px 0px
                justify-content: left
            slots:
              default:
                - component: oh-link
                  config:
                    action: command
                    actionItem: Spotify_Fernbedienung
                    actionCommand: PREVIOUS
                    style:
                      padding-right: 2px
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          icon: if:mdi:skip-previous-outline
                          color: white
                          height: 28px
                - component: Label
                  config:
                    text: =items['Spotify_Titellaufzeit_mss'].state
                    style:
                      color: white
                      font-weight: 400
                      width: 30px
                      padding: 3px 2px 0px 2px
                      text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5)
                - component: f7-progressbar
                  config:
                    progress: = 100 * (Number.parseInt(items['Spotify_Titellaufzeit_ms'].state) / Number.parseInt(items['Spotify_Titellaenge_ms'].state))
                    style:
                      width: 150px
                      --f7-progressbar-height: 3px
                      margin: 12px 5px 0px 5px
                - component: Label
                  config:
                    text: =items['Spotify_Titellaenge_mss'].state
                    style:
                      color: white
                      font-weight: 400
                      width: 30px
                      padding: 3px 2px 0px 2px
                      text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5)
                - component: oh-link
                  config:
                    action: command
                    actionItem: Spotify_Fernbedienung
                    actionCommand: PREVIOUS
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          icon: if:mdi:skip-next-outline
                          color: white
                          height: 28px
                - component: oh-link
                  config:
                    action: options
                    actionItem: Spotify_Playlists
                    style:
                      margin-left: auto
                  slots:
                    default:
                      - component: oh-icon
                        config:
                          icon: if:mdi:playlist-music
                          color: white
                          height: 28px
Screenshots

Firefox
image
Chromium

image
image928×1192 106 KB

2

I cannot tell you why there is a rendering difference between firefox and chromium here. The icon you are selected is in svg format and that icon has it’s own internal height and width set to 100%, so that’s where that value is coming from.

The easiest work around here that should work is to not use the oh-icon height property directly but instead to move it down to the style which instead of getting sent to the icon as part of the icon format will be sent directly to the css style of the container:

- component: oh-icon
  config:
    icon: if:simple-icons:spotify
    style:
      height: calc(var(--f7-button-height) - var(--f7-button-border-width, 0) * 2)
    color: var(--f7-button-fill-bg-color, var(--f7-theme-color))
3

Thanks for your reply, Justin. Strange thing though that a fixed value like 28px overwrites the internal properties, while the calculation does not.
However, your proposed fix is (almost) working as expected. I just had to set a value for width as well, even though auto is sufficient.

- component: oh-icon
  config:
    icon: if:simple-icons:spotify
    color: var(--f7-button-fill-bg-color, var(--f7-theme-color))
    style:
      height: calc(var(--f7-button-height) - var(--f7-button-border-width, 0) * 2)
      width: auto