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

[craggyh]

I also have this issue. Is there a workaround?

[mortenmoulder]

@craigueh Not until @denysdovhan or another person (via pull request) fixes it. For now, you can revert back to 2021.10 if it bothers you too much.

[bstrakt]

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

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

line 402:
replace:
>
with:
><ha-icon icon="hass:home-map-marker"></ha-icon>

line 412:
replace:
>
with:
><ha-icon icon="hass:play"></ha-icon>

line 419:
replace:
>
with:
><ha-icon icon="mdi:map-marker"></ha-icon>

and the whole code from line 394 to 419:

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

    const dockButton = html`
      <ha-icon-button
        icon="hass:home-map-marker"
        title="${localize('common.return_to_base')}"
        @click="${() => this.callService('return_to_base')}"
      ><ha-icon icon="hass:home-map-marker"></ha-icon>
      </ha-icon-button>
    `;

    return html`
      <div class="toolbar">
        <ha-icon-button
          icon="hass:play"
          title="${localize('common.start')}"
          @click="${() => this.callService('start')}"
        ><ha-icon icon="hass:play"></ha-icon>
        </ha-icon-button>

        <ha-icon-button
          icon="mdi:map-marker"
          title="${localize('common.locate')}"
          @click="${() => this.callService('locate', false)}"
        ><ha-icon icon="mdi:map-marker"></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