ha-icon-button no longer supports icon="" in 2021.11

[mortenmoulder]

After updating to 2021.11 I noticed that all icons were missing from this integration.

I created an issue on the Home Assistant Frontend repository, only to find that ha-icon-button has changed behavior. This is not listed in the official update's "breaking changes" section, because using ha-icon-button is technically wrong, since it's a Home Assistant component/element, that should not be used by developers. Read more on my issue here: home-assistant/frontend#10521

[bstrakt]

until it's fixed, you can manually edit purifier-card.js and modify the following lines:

line 409:
replace:
></ha-icon-button>
with:
><ha-icon icon="${icon}"></ha-icon></ha-icon-button>

line 421:
replace:
>
with:
><ha-icon icon="hass:power"></ha-icon>

and the whole code from line 394 to 419:

      ><ha-icon icon="${icon}"></ha-icon></ha-icon-button>
    `;
  }
);

return html`
  <div class="toolbar">
    <ha-icon-button
      icon="hass:power"
      class="${state === 'on' ? 'active' : ''}"
      title="${localize('common.toggle_power')}"
      @click="${() => this.callService('fan.toggle')}"
    ><ha-icon icon="hass:power"></ha-icon>

You must maintain the spacing (just replace the code from the line with the new code without deleting the space before it).
Clear browser or app cache and it should work.

EDIT:
just realized that the line numbers may be different, so manually search for the text before replacing any lines

[denysdovhan]

Thanks for reporting!

[github-actions]

🎉 This issue has been resolved in version 0.13.1 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀