Can't change icon size and color

Third party integrations Floorplan
1

Hi everyone,
For some reason I can’t change color and font size of an mdi icon in my floorplan.
I have created my floorplan using sweethome3D.
I cut the part of the image and save it as a PNG file and I added it as a picture element card.
I changed the icon but when I’m trying to set its size and color it doesn’t affect on the image.
What I’m doing wrong?
Thanks

  - title: Floor plan
    path: Floor-plan
    icon: 'mdi:home-circle-outline'
    panel: true
    cards:
      - type: picture-elements
        image: /local/Lior_plan.PNG
        elements:
          - type: state-icon
            entity: cover.livingroom_maincurtain
            icon: 'mdi:cctv'
            tap_action: toggle
            style:
              top: 27%
              right: 12%
              '--iron-icon-height': 30px
              '--iron-icon-width': 30px
              '--iron-icon-fill-color': '#11AB7D'
1 Like
2

You can change the size of the icon with transform. For example…

    style:
      transform: 'scale(4,4)'

…will make it four times the normal size.

3

Great, indeed that works.
What about the color?
I have tried both "--iron-icon-fill-color" and "--paper-item-icon-color": green but none of them is working.
Can you help me here?
Thanks

4

I don’t think it’s possible to change icon colours, apart from changing the theme (which will affect all icons). I believe there is a custom component which will do it, though. Have a look here.

5

Hi, this works for me, both size and color:

- type: state-icon
  entity: light.lamp
  state_color: false
  style:
    top: 40%
    left: 30%
    --paper-item-icon-color: "#DB9D00"
    --iron-icon-stroke-color: "#9B6D00"
    width: 50px
    height: 50px
    line-height: 50px
    border-radius: 50%
    transform: scale(1.5,1.5)
    text-align: center
    background-color: "rgba(255, 255, 255, 0.3)"

image

6

Thanks,
The background indeed works but for some reason these two are not working:

–paper-item-icon-color: “#DB9D00”
–iron-icon-stroke-color: “#9B6D00”

7

Have you set state_color to false?

8

No I didn’t.
This is my code.

- title: Floor plan
    icon: 'mdi:home-circle-outline'
    panel: true
    cards:
      - type: picture-elements
        image: /local/Lior_plan.PNG
        elements:
          - type: image
            entity: cover.livingroom_maincurtain
            tap_action: toggle
            image: /local/Saloon.PNG
            state_filter:
              'on': brightness(100%)
              'off': brightness(50%)
            style:
              top: 18.5%
              right: '-1.4%'
              width: 26%
          - type: image
            entity: cover.livingroom_maincurtain
            tap_action: toggle
            image: /local/Parents_room.PNG
            state_filter:
              'on': brightness(100%)
              'off': brightness(50%)
            style:
              top: 17.7%
              left: 28.2%
              width: 17.2%
          - type: image
            entity: cover.livingroom_maincurtain
            tap_action: toggle
            image: /local/Bathroom.PNG
            state_filter:
              'on': brightness(100%)
              'off': brightness(50%)
            style:
              top: 12.99%
              left: 41.5%
              width: 8.8%
          - type: state-icon
            title: Sloon curtain
            tap_action: toggle
            entity: cover.livingroom_maincurtain
            style:
              top: 24%
              right: 13%
              transform: 'scale(1,1)'
              background-color: 'rgba(255, 0.3, 0.3, 0.3)'
              -–paper-item-icon-color: “#DB9D00”
              -–iron-icon-stroke-color: “#9B6D00”
9

Check the first character before your color attributes
In the first source code you published, those was prefixed by single quote character.
In the most recent one, it seems you are prefixing them with wrong hyphen.

Also I’m sure you are using wrong double-quote characters for colors

I’m judging this by comparing how tobi-bo’s code is shown on the forum in comparison to your one.

obrazek

obrazek

10

You can try it then :wink:

11

tobi-bo , I have tried to copy the code that you mentioned above, I just changed the entity.
Still nothing. (See picture below)
I know that it doesn’t make sense but, maybe it related to that face that I’m using a PNG file as my floor plan or that I use an entity that its device currently doesn’t get powered?

          - type: state-icon
            entity: cover.livingroom_maincurtain
            state_color: false
            style:
              top: 40%
              left: 30%
              --paper-item-icon-color: "#DB9D00"
              --iron-icon-stroke-color: "#9B6D00"
              width: 50px
              height: 50px
              line-height: 50px
              border-radius: 50%
              transform: scale(1.5,1.5)
              text-align: center
              background-color: "rgba(255, 255, 255, 0.3)"

Capture

12

Found it,
Indeed it was related to the entity or to the power.
I changed the entity to one of my switches who has power and indeed the color has changed.

1 Like