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 
1 Like
Lol. It’s all good.
For some reason, they are not partially displayed for me. The screenshot shows that somewhere there is a switch icon, but somewhere this same icon is not
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.
1 Like
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!
1 Like
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?
- Add the following to your configuration.yaml, save and restart HA.
frontend:
extra_module_url:
- /local/hass-hue-icons.js
1 Like
Thanks it was the configuration.yaml I missed
1 Like
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
1 Like
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?
1 Like
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.
1 Like
Great, thanks for the info and the movie. The blue-ish colour is indeed visible in both themes, didn’t even think about that. Will experiment over the weekend and let you know how it turns out.
1 Like
Nice one. If you get stuck, the simple rule I use is to keep everything in one path. If your svg file says
<g>
<path d="lots of numbers"/>
<path d="lots more numbers"/>
</g>
<g>
<path d="yet more numbers"/>
</g>
You can just write this out as:
<path d="lots of numbers lots more numbers yet more numbers"/>