Hi guys. First off, thanks for all of this, the icons are so nice! Im rather new to HA, have got a bunch set up and am now trying to integrate this into my current setup. Im wondering if there is a way to enable ‘hold actions’ on these? To open and change the colors of the individual lights using the custom card.
Thanks!
Hmmm… Not entirely sure what you mean by ‘the custom card’. The hass-hue-icons library just swaps out the icons that are mapped to your entities, and doesn’t intend to change the underlying functionality of home assistant.
If you click the icon or entity name, you should get the picker you’re talking about. Clearly something amiss. Here’s a video of my dash in use:
Thank you Colin. I do this for free to give back to the community, so its great to hear you’re enjoying them. Don’t forget to raise an feature request if there’s a hue icon you’re missing. Seems there are new lamps coming out in various territories every few days 
Oh gosh I am a total idiot. The lights I was testing the icons with were just white ones, not the other rooms which have color. Set it up to control the color bulbs and strips and yep, there’s the color picker 
Lol. It’s all good.
Sorry to hear this.
Did you install via HACS? Did you add the extra_module_url to your configuration.yaml, eg:
frontend:
extra_module_url:
- /hacsfiles/hass-hue-icons/hass-hue-icons.js
I’ve had home assistant fail to put an icon into the first loaded dash screen without this, sometimes even showing an icon in one place and not another. Is it the same icon that’s always missing? Does it appear anywhere else? Does it do it every time?
Edit: Also, bit hard to see from your screenshot. Are you on Android? A lot of the icon libraries are struggling to deliver consistently in the face of webview cache issues (see Icons doesn't display on App).
I’ve reworked the script, and taken the opportunity to integrate piitaya’s excellent icon picker PR into this library. Now you have icon picker support for your hue devices!
New release is on its way.
New release is up, and for those that didn’t catch the release party, hass hue icons is on Frenck’s ceiling!
I would seriously recommend getting into open source for anyone. At times like this, seeing one of your heroes using something you created, the feeling is just amazing.
So I just installed this yesterday and it worked fine, after updating to 2021.11.0. I keep getting an error in HACS that it was not loaded properly… so after messing around uninstalling and reinstalled and verifying the extra_module stuff… and downgrading and upgrading… I finally thought to look and realized the icons were actually still loading… and loading in the icon picker also… so I just wanted to mention it so no one else thinks it’s broken when it is still actually working. I just turned on debug logs to try to see what the error is so if I find anything I will update here so maybe it can get resolved.
Thanks for this. Sorry to hear it’s been misbehaving for you. I’ve not seen that before, but would be interested in the logs if you manage to trigger it again.
So with full debug on my logs were too much to manage… do you think I would be better off turning on debug for HACS or Frontend? I will do them individually so I can actually browse it… (also do you know if it is like homeassistant.components.frontend) or is it named something else for debug logs? Usually the name you see in the log is what you should use but I only see frontend.js…
and thanks for the awesome work some great icons in there I wish I knew about awhile ago!
If it’s a js error, might it just come out in your browser’s developer console? That might shortcut the wall of text that can be the logs.
Thanks for the appreciation. This started as a “Hey… my kitchen light doesn’t look like any of the mdi:bulb variants” and has ended up being a huge community driven project that recently exceeded 200 hours of effort. I’m learning as I go, have got much better at drawing the custom icons, and am always pleasantly surprised when someone pops up from an unexpected territory with a hue device I’ve never seen, and makes a request.
It’s great to be able to give something back to the HA community, and I’m glad you’re finding it useful.
Installed this yesterday, after a reboot the icons are gone.
They are visible in Edit-mode.
No amount of refreshing without cache seems to help
Update They seem to be there when I switch to the Panel but if I reload the page on that panel the icons disapear
If your Lovelace extension doesn’t seem to show on initial load of the page, only after moving between panels, that’s normally HA not loading the resource in time for the first render.
Did you install via HACS? Can you check you’ve done the final step in the installation?
frontend:
extra_module_url:
- /local/hass-hue-icons.js
Thanks it was the configuration.yaml I missed
Still haven’t dug more into the HACS issue yet, but unrelated… the other morning this suddenly happened on both chrome and safari, mobile and desktop… all the refreshing in the world didn’t take care of it, then suddenly they all went back except my mobile. I am thinking it’s more likely a custom button card thing, but I cannot reproduce with mdi icons. It also looks weird in a normal entities card. Just wondering if anyone else has ran into this… first picture is in custom button cards and second “Icon Test” is in a standard entities card.
What’s the code for those small buttons with the icon centered?
it’s from GitHub - TBens/lovelace-ui-minimalist: 🌻 Lovelace UI • Minimalist (legacy version) so it’s button-card with button card templates populating that icon circle… also still working fine on desktop since it changed back but chrome and safari on mobile still doing it.
The Card Itself
- entity: light.living_room
name: Living Room
icon: hue:room-living
template:
- icon_info_bg
- light
type: 'custom:button-card'
icon_info_bg template
icon_info_bg:
color: var(--google-grey)
show_icon: true
show_name: true
show_label: true
size: 20px
custom_fields:
notification: >
[[[
if (entity.state =='unavailable'){
return `<ha-icon icon="mdi:exclamation" style="width: 12px; height: 12px; color: var(--primary-background-color);"></ha-icon>`
}
]]]
state:
- styles:
custom_fields:
notification:
- border-radius: 50%
- position: absolute
- left: 38px
- top: 8px
- height: 16px
- width: 16px
- border: 2px solid var(--card-background-color)
- font-size: 12px
- line-height: 14px
- background-color: >
[[[
return "rgba(var(--color-red),1)";
]]]
value: unavailable
styles:
card:
- border-radius: var(--border-radius)
- box-shadow: var(--box-shadow)
- padding: 12px
grid:
- grid-template-areas: '"i n" "i l"'
- grid-template-columns: min-content auto
- grid-template-rows: min-content min-content
icon:
- color: 'rgba(var(--color-theme),0.2)'
img_cell:
- background-color: 'rgba(var(--color-theme),0.05)'
- border-radius: 50%
- place-self: center
- width: 42px
- height: 42px
name:
- align-self: end
- justify-self: start
- font-weight: bold
- font-size: 14px
- margin-left: 12px
label:
- justify-self: start
- align-self: start
- font-weight: bold
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
state:
- justify-self: start
- align-self: start
- font-weight: bold
- font-size: 12px
- filter: opacity(40%)
- margin-left: 12px
light template
light:
tap_action:
action: toggle
hold_action:
action: more-info
label: >-
[[[ if (entity.state !='unavailable'){
if (entity.state =='off'){
var bri = Math.round(entity.attributes.brightness / 2.55);
return 'Off';
}else{
var bri = Math.round(entity.attributes.brightness / 2.55);
return (bri ? bri : '0') + '%';
}
}else{
return "Indisponible";
}
]]]
template:
- yellow
Hi Andy, great work on the HUE icons and getting them supported by the colour-picker in HA !
I added some personal icons to the js-file but notice these now have to be ? 24x24 ? pixels in order to display, is that correct?
You mentioned using Illustrator to create these from scratch, would the same be possible using Inkscape and what colour to draw them?
Thanks.
The hass-hue-icons are all 24 x 24. You can probably scale anything you create in Inkscape to suit. The colour doesn’t matter. The script just takes a single value (a string starting M…) and puts it into a d=“M…” path to create an svg and inherits the colour that HomeAssistant is trying to apply.
For neatness, I colour them blue so that they show up in Github against a light and dark theme. If you want to fork or clone hass-hue-icons and make your own changes, point me at the repo and I’ll try to guide you.
Edit: here’s a silent movie of me exporting an icon from illustrator into the javascript file.
