Question: Custom Icon Picture

[Daniel-dev22]

Is it possible instead of specifying an icon to use or using the input_number icon to use a picture?

For example in a mushroom template card you can use a picture which will replace the icon.

picture: local/icons/custom_icons/spotlight2.png

[htmltiger]

mushroom card uses

            <mushroom-shape-avatar
                slot="icon"
                .picture_url=${(this.hass as any).hassUrl(picture)}
            ></mushroom-shape-avatar>

and it would not work for standard installs.
we would have to wait until home assistant adds the support for picture display

[htmltiger]

added in 3.15, please try it.

[Daniel-dev22]

added in 3.15, please try it.

Updated and reloaded cache and Lovelace and it's not working.

I tried with an without '

local/icons/custom_icons/dockpro.png
And 'local/icons/custom_icons/dockpro.png'

type: custom:numberbox-card
entity: input_number.left_dockpro_temperature
picture: 'local/icons/custom_icons/dockpro.png'
secondary_info: >-
  Mode:<b style="color:white"> %sensor.left_dockpro_status:state </b><br />
  Water temp:<b style="color:white">
  %sensor.left_dockpro_status:attributes:water_temperature </b> <br /> Water
  level:<b style="color:white">
  %sensor.left_dockpro_status:attributes:water_level </b>
card_mod:
  style: |
    ha-card {
      --ha-card-background: transparent

[htmltiger]

try /local/...

[Daniel-dev22]

try /local/...

/local/icons/custom_icons/dockpro.png

Didn't work either.

[htmltiger]

you may need to do icon: false also

[Daniel-dev22]

you may need to do icon: false also

Simply typing icon: and it appeared.

It does require /local/..

With mushroom cards I'm able to do this

card_mod:
  style: |
    ha-card {
      --ha-card-background: transparent;
      --icon-border-radius: 0;

With --icon-border-radius: 0 removing the cutoff you see in the picture.

What would I need to do for this card?

[Daniel-dev22]

For comparison.

See the left picture.

[htmltiger]

try this

card_mod:
  style: |
    state-badge{
        border-radius: 0 !important;
    }

if it does not work try that under

type: entities
show_header_toggle: false
entities:
  - entity: input_number.my_slider
    type: 'custom:numberbox-card'
    card_mod:
      style: |
        state-badge{
            border-radius: 0 !important;
        }

[Daniel-dev22]

try this

card_mod:
  style: |
    state-badge{
        border-radius: 0 !important;
    }

That worked. I wonder what the difference is between icon-size of the mushroom Template card and this card. It appears the mushroom card decreases the picture size to fit? Is that something that can be modified with card mod?

[htmltiger]

looks like your picture is not square

card_mod:
  style: |
    state-badge{
        border-radius: 0 !important; background-size: contain;
    }

[Daniel-dev22]

looks like your picture is not square

card_mod:
  style: |
    state-badge{
        border-radius: 0 !important; background-size: contain;
    }

Lol it made 2 of them

[htmltiger]

background-size:100% 100%;

[Daniel-dev22]

Perfect thank you for your patience.

[htmltiger]

great,
this will help others styling custom css #26