Icons not being displayed or formatted after upgrading to 2023.2.x

[kaizersoje]

I have noticed that after upgrading to 2023.2.x icons are not being displayed or formatted as before.

type: entities
entities:
  - type: custom:template-entity-row
    icon: mdi:weather-windy
    name: "Beaufort scale: {{ states('sensor.beaufort') }}"
    state: "{{ state_attr('sensor.beaufort','description') }}"
    card_mod:
      style: |
        :host {
        --paper-item-icon-color:
          {%- set beaufort = states('sensor.beaufort') | float -%}
          {%- if beaufort >= 9 -%} rgb(244, 67, 54)
          {%- elif beaufort >= 7 -%} #C68C71
          {%- elif beaufort >= 5 -%} #F2AA19
          {%- elif beaufort >= 3 -%} #E4C23D
          {%- elif beaufort >= 1 -%} #57C6EA
          {%- else -%} #5BC04D
          {%- endif -%}
          ;
        }
  - type: custom:template-entity-row
    icon: mdi:sun-thermometer-outline
    entity: sensor.heatindex
    name: "Heat Index: {{ states('sensor.heatindex') }}"
    state: "{{ state_attr('sensor.heatindex','description') }}"
    card_mod:
      style:
        template-entity-row$: |
          state-badge {
            color: 
              {%- set heatindex = states('sensor.heatindex') | float -%}
              {%- if heatindex >= 54 -%} rgb(244, 67, 54)
              {%- elif heatindex >= 41 -%} #C68C71
              {%- elif heatindex >= 32 -%} #F2AA19
              {%- elif heatindex >= 26 -%} #E4C23D
              {%- else -%} #5BC04D
              {%- endif -%}
              ;
            }
  - type: custom:template-entity-row
    name: Estimate
    icon: mdi:currency-usd
    state: |
      {{ 
        "${:.2f}".format(
            (states('sensor.daily_grid_consumption')|float(none) * states('input_number.grid_tariff')|float) + 
            states('input_number.power_daily_charge')|float/100 - 
            (states('sensor.pv_eday')|float(none) * states('input_number.solar_feedin_tariff')|float)
        ) 
      }}
    card_mod:
      style:
        state-badge$: |
          ha-state-icon{
            color:
              {%- set amt = (states('sensor.daily_grid_consumption')|float(none) * states('input_number.grid_tariff')|float) + 
                  states('input_number.power_daily_charge')|float/100 - 
                  (states('sensor.pv_eday')|float(none) * states('input_number.solar_feedin_tariff')|float) -%}
              {%- if amt > 0 -%} #CD5C5C
              {%- else -%} #3CB371
              {%- endif -%}
              !important;
          }
        .: |
          .state {
            font-weight: 500;
            font-size: 13pt;
            color:
              {%- set amt = (states('sensor.daily_grid_consumption')|float(none) * states('input_number.grid_tariff')|float) + 
                  states('input_number.power_daily_charge')|float/100 - 
                  (states('sensor.pv_eday')|float(none) * states('input_number.solar_feedin_tariff')|float) -%}
              {%- if amt > 0 -%} #CD5C5C
              {%- else -%} #3CB371
              {%- endif -%}
              !important;
          }

This is how it looks.

[ildar170975]

If you really want to find out a reason of your issue - try to at least localize it. Posting a code with a complex logic and things not related to the issue does not help nether you nor other users who may help.

[kaizersoje]

Well, here is just one entity that I have isolated from the entities above.

type: entities
entities:
  - type: custom:template-entity-row
    icon: mdi:weather-windy
    name: 'Beaufort scale: {{ states(''sensor.beaufort'') }}'
    state: '{{ state_attr(''sensor.beaufort'',''description'') }}'

[bdormael]

I have the same issue wherever I use custom:template-entity-row and have the “icon: mdi:…” mentioned Same issue with custom:fold-entity-row

- type: custom:template-entity-row
    icon: mdi:currency-eur
    name: Gekochte Electriciteit
    state: '{{ (states(''sensor.electriciteit_gekocht''))|float|round(1) }} kWh'
    tap_action:
      action: none

[sagaland93]

Same here.

When I'm using 'custom:template-entity-row' the icon is not displayed. Doesn't seem to matter if I set an icon or not - It's blank regardless.

Comparing to a regular entity, instead of this custom type:

entity: sensor.electrical_daily_usage

An icon lives inside it

type: custom:template-entity-row

Blank. Just shadowroot

[michalolborski]

you can easily fix it by changing line 8 in template-entity-row.js from: .stateObj=${s} to this .stateObj=${this.hass.states[this.config.entity]}

Im not sure why author did this weird parse json thingy inside. Generally if you don't specify entity in configuration then icon will disappear (despite if you specified it in icon prop)

Ps. remember to remove template-entity-row.js.gz after changing template-entity-row.js on your local setup, and refresh cache ;)

[sagaland93]

@michalolborski ; Worked. Thank you!

[michalolborski]

@thomasloven, could you kindly check this PR: https://github.com/thomasloven/lovelace-template-entity-row/pull/101, I believe I fixed this issue and also: https://github.com/thomasloven/lovelace-template-entity-row/issues/95 and https://github.com/thomasloven/lovelace-template-entity-row/issues/94

[ildar170975]

Confirmed - an icon is NOT displayed if no entity is defined:

      type: custom:template-entity-row
      state: yyy
      name: xxx
      icon: mdi:car

[ildar170975]

The issue seems to be resolved in the latest update. Thank you , @thomasloven

[ildar170975]

May be closed imho

[thomasloven]

Thanks!