FA and MDI icons show on some widgets, not others

Third party integrations HADashboard
1

I cannot track down what’s wrong here, and no amount of docs reading or eliminating variables produces anything close to useful.

Some of my widgets don’t show their icons, and some do. MDI, FA, it doesn’t matter. And I don’t know what I’m doing wrong.

I have a sensor that reports four statuses, idle, testing, smoke and co2. I’m attempting to use the icon widget. According to documentation, it should look something like this:

icon:
      title: icon
      widget_type: icon
      entity: binary_sensor.basement_door_sensor
      state_text: 1
      icons:
        "active":
          icon: fa-glass
          style: "color: green"
        "inactive":
          icon: fa-repeat
          style: "color: blue"
        "idle":
          icon: fa-frown-o
          style: "color: red"
        "default":
          icon: fa-rocket
          style: "color: cyan"

And here’s mine:

kitchen_alarm_status:
  title: Kitchen Alarm Status
  widget_type: icon
  entity: sensor.kitchen_alarm_status
  state_text: 1
  icons:
    "smoke":
      icon: mdi-fire
      style: "color: red;"
    "co2":
      icon: mdi-cloud
      style: "color: red;"
    "testing":
      icon: mdi-help-rhombus
      style: "color: blue;"
    "idle":
      icon: mdi-smoke-detector
      style: "color: green;"

And here’s what it looks like:
43%20PM

On the left, you see the basement leak sensor, which uses mdi-emoticon-happy, which loads correctly. On the right is another alarm identical to this as a sensor widget that just mirrors the sensor data.

This same dashboard also has this:

basementTV:
    widget_type: switch
    entity: group.basementtv
    title: "Basement TV & Xbox"
    icon_on: mdi-xbox-controller
    icon_off: mdi-xbox-controller-off
    icon_style_active: "color: blue;"

which looks beautiful and works correctly.
38%20PM

Any icon that is a switch loads both mdi- and fa- icons correctly, despite the icon widget absolutely supporting the icon: attribute.

What I’ve tried:

  • Altering spacing on the widget from 2 indent to 4, and back. It has no effect and the result looks the same.
  • Changing icon: to icon_on and icon_off, as well as icon_active and icon_inactive, including both sets when one is included and using them standalone.
  • Verifying I’m on the latest version of Appdaemon, 3.0.1
  • Altering and removing style completely
  • Using community and google MDI icons (no outline vs orange outline from here)
  • Restarting HA, AppDaemon and the entire RPi.
  • Using other skins
  • Setting use_hass_icon to 0, and removing it completely.
  • Verifying in appdaemon.yaml that it recognizes my HA install and where my dashboards are
  • Applying icons to other widget types, including navigate. Same issue. using mdi-robot-vacuum just gives me a blank square when used on a navigate widget.
    54%20PM

All three of these widgets are navigate.

What am I doing wrong? Is there a permissions or css issue I’m overlooking?

2

your not doing anything wrong.

MDI and FA regularly change their icons.
FA has in the recent past completely changed their website and the way the icons are used.

to make it all work, the maintainer (Andrew) from the application (AD) needs to do an update on the MDI and FA part. there hasnt been an update from AD recently, so part from the icons are outdated.

the result for you is that you can find some icons on the FA and MDI website that are not included in AD.
mdi-robot-vacuum is probably such an icon.

what you need to do?
use another icon untill Andrew has had the possibility to update it.
finding out what works and what not can be a bit of a hassle though. default icons should work at least, to make sure you are doing it right by using fa-circle
if that works and another icon not, you know that the icon you tried is not supported (yet)

3

So there’s no list of what works and what doesn’t? It seems strange that mdi-smoke-detector isn’t included, but mdi-xbox-controller-off is.

I suppose trial and error is the best way forward until this gets updated.

Thanks for your response! Your github was where I turned trying to tie sensors to icons in HADashboard when this wasn’t working. Good to know it’s not anything I’m intentionally doing that’s breaking this feature.

4

Hi maybe i discovered hot water but putting icon_style_active` set on in this way icon_style_on: color: orange" in sensor_widget_detection the icon choose the color you input.
The other way around icon_style_inactive works with the color you choose.
Hope this helps