search

bokub / rgb-light-card

💡 A Home Assistant card for RGB lights
MIT License
427 stars 24 forks source link

Allow setting a mdi: icon for icon_color #6

Closed michaelarnauts closed 4 years ago

michaelarnauts commented 4 years ago

Currently, it's possible to set a image for icon_color like icon_color: center/120% url('https://www.home-assistant.io/images/favicon-192x192.png').

It would be great if we could just use the mdi: or far:-icons that are available in Home Assistant.

bokub commented 4 years ago

It's not a bad idea, but how would you imagine the look of it?

An icon in a circle or just an icon? What would be the color? And the background color? This seems out of the scope of this card...

If you need deep customization, the button-entity-row card may be more suited for your needs

michaelarnauts commented 4 years ago

I was thinking it could just be the same as the image url, but maybe a better api would be to split the color and the image.

Like:

type: entities
entities:
    - type: 'custom:rgb-light-card'
      colors:
          # First icon calls a script
          - type: script
            entity_id: script.night_mode
            icon_color: 'linear-gradient(#777777, #151515)'
            icon_image: 'mdi:hotel'
            #icon_image: 'https://www.home-assistant.io/images/favicon-192x192.png'

The icon_image should also have a no-repeat set. This is currently not the case in the example, causing a repetitive icon to be displayed when setting the size below 100%.

bokub commented 4 years ago

So what do you have in mind ?

michaelarnauts commented 4 years ago

Not sure, I would expect that the icon_color defined the background (always a circle). If this is not present, there would be no circle. The icon_image would be overlayed over this.

Swampen commented 4 years ago

I was also lookng for this. I think a colored icon with no background would be more flexible. And maybe be able to choose the color of the icon?

fastcolors commented 4 years ago

+1

bokub commented 4 years ago

@Swampen , if what you need is a colored icon without a background, you should consider using button-entity-row instead

Swampen commented 4 years ago

@Swampen , if what you need is a colored icon without a background, you should consider using button-entity-row instead

I had a look at it, but it doesn't have an easy way to customize the lights individually. I used the https://api.iconify.design api as a workaround for now as icon images. Not that pretty on white backgrounds, but it works 😄

bokub commented 4 years ago

I don't think I'll implement this icon thing, so I'm closing the issue for the moment

bokub commented 3 years ago

Just to let you know, I have created a tool to convert a material design icon into pure CSS compatible with this card.

Hope it helps !