diff --git a/src/cards/alarm-control-panel-card/alarm-control-panel-card.ts b/src/cards/alarm-control-panel-card/alarm-control-panel-card.ts
index 9e5eaf83a..9cd4dc462 100644
--- a/src/cards/alarm-control-panel-card/alarm-control-panel-card.ts
+++ b/src/cards/alarm-control-panel-card/alarm-control-panel-card.ts
@@ -204,10 +204,12 @@ export class AlarmControlPanelCard extends MushroomBaseCard implements LovelaceC
                                   ${actions.map(
                                       (action) => html`
                                           <mushroom-button
-                                              .icon=${alarmPanelIconAction(action.state)}
                                               @click=${(e) => this._onTap(e, action.state)}
                                               .disabled=${!isActionEnabled}
-                                          ></mushroom-button>
+                                          >
+                                              <ha-icon .icon=${alarmPanelIconAction(action.state)}>
+                                              </ha-icon>
+                                          </mushroom-button>
                                       `
                                   )}
                               </mushroom-button-group>
diff --git a/src/cards/climate-card/climate-card.ts b/src/cards/climate-card/climate-card.ts
index 802c712e1..72b2f4c7f 100644
--- a/src/cards/climate-card/climate-card.ts
+++ b/src/cards/climate-card/climate-card.ts
@@ -248,10 +248,9 @@ export class ClimateCard extends MushroomBaseCard implements LovelaceCard {
         return html`
             ${otherControls.map(
                 (ctrl) => html`
-                    <mushroom-button
-                        .icon=${CONTROLS_ICONS[ctrl]}
-                        @click=${(e) => this._onControlTap(ctrl, e)}
-                    ></mushroom-button>
+                    <mushroom-button @click=${(e) => this._onControlTap(ctrl, e)}>
+                        <ha-icon .icon=${CONTROLS_ICONS[ctrl]}></ha-icon>
+                    </mushroom-button>
                 `
             )}
         `;
diff --git a/src/cards/cover-card/controls/cover-buttons-control.ts b/src/cards/cover-card/controls/cover-buttons-control.ts
index 9a1dc539a..ff2480c54 100644
--- a/src/cards/cover-card/controls/cover-buttons-control.ts
+++ b/src/cards/cover-card/controls/cover-buttons-control.ts
@@ -65,10 +65,11 @@ export class CoverButtonsControl extends LitElement {
                 ${supportsFeature(this.entity, COVER_SUPPORT_OPEN)
                     ? html`
                           <mushroom-button
-                              .icon=${computeOpenIcon(this.entity)}
                               .disabled=${!isAvailable(this.entity) || this.openDisabled}
                               @click=${this._onOpenTap}
-                          ></mushroom-button>
+                          >
+                              <ha-icon .icon=${computeOpenIcon(this.entity)}></ha-icon>
+                          </mushroom-button>
                       `
                     : undefined}
                 ${supportsFeature(this.entity, COVER_SUPPORT_STOP)
@@ -77,16 +78,19 @@ export class CoverButtonsControl extends LitElement {
                               icon="mdi:stop"
                               .disabled=${!isAvailable(this.entity)}
                               @click=${this._onStopTap}
-                          ></mushroom-button>
+                          >
+                              <ha-icon icon="mdi:stop"></ha-icon>
+                          </mushroom-button>
                       `
                     : undefined}
                 ${supportsFeature(this.entity, COVER_SUPPORT_CLOSE)
                     ? html`
                           <mushroom-button
-                              .icon=${computeCloseIcon(this.entity)}
                               .disabled=${!isAvailable(this.entity) || this.closedDisabled}
                               @click=${this._onCloseTap}
-                          ></mushroom-button>
+                          >
+                              <ha-icon .icon=${computeCloseIcon(this.entity)}></ha-icon>
+                          </mushroom-button>
                       `
                     : undefined}
             </mushroom-button-group>
diff --git a/src/cards/cover-card/cover-card.ts b/src/cards/cover-card/cover-card.ts
index 1b6af1eb5..7c26bfc96 100644
--- a/src/cards/cover-card/cover-card.ts
+++ b/src/cards/cover-card/cover-card.ts
@@ -1,4 +1,3 @@
-import { HassEntity } from "home-assistant-js-websocket";
 import { css, CSSResultGroup, html, nothing, PropertyValues, TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { classMap } from "lit/directives/class-map.js";
@@ -234,11 +233,13 @@ export class CoverCard extends MushroomBaseCard implements LovelaceCard {
             <mushroom-button
                 .icon=${CONTROLS_ICONS[this._nextControl]}
                 @click=${this._onNextControlTap}
-            />
+            >
+                <ha-icon .icon=${CONTROLS_ICONS[this._nextControl]}></ha-icon>
+            </mushroom-button>
         `;
     }
 
-    private renderActiveControl(stateObj: HassEntity, layout?: Layout) {
+    private renderActiveControl(stateObj: CoverEntity, layout?: Layout) {
         switch (this._activeControl) {
             case "buttons_control":
                 return html`
@@ -246,7 +247,7 @@ export class CoverCard extends MushroomBaseCard implements LovelaceCard {
                         .hass=${this.hass}
                         .entity=${stateObj}
                         .fill=${layout !== "horizontal"}
-                    />
+                    ></mushroom-cover-buttons-control>
                 `;
             case "position_control": {
                 const color = getStateColor(stateObj as CoverEntity);
@@ -260,7 +261,7 @@ export class CoverCard extends MushroomBaseCard implements LovelaceCard {
                         .entity=${stateObj}
                         @current-change=${this.onCurrentPositionChange}
                         style=${styleMap(sliderStyle)}
-                    />
+                    ></mushroom-cover-position-control>
                 `;
             }
             case "tilt_position_control": {
@@ -274,7 +275,7 @@ export class CoverCard extends MushroomBaseCard implements LovelaceCard {
                         .hass=${this.hass}
                         .entity=${stateObj}
                         style=${styleMap(sliderStyle)}
-                    />
+                    ></mushroom-cover-tilt-position-control>
                 `;
             }
             default:
diff --git a/src/cards/fan-card/controls/fan-oscillate-control.ts b/src/cards/fan-card/controls/fan-oscillate-control.ts
index c6926b1bb..fc928fe98 100644
--- a/src/cards/fan-card/controls/fan-oscillate-control.ts
+++ b/src/cards/fan-card/controls/fan-oscillate-control.ts
@@ -29,10 +29,15 @@ export class FanPercentageControl extends LitElement {
         return html`
             <mushroom-button
                 class=${classMap({ active: oscillating })}
-                .icon=${"mdi:sync"}
                 @click=${this._onTap}
                 .disabled=${!active}
-            />
+            >
+                <ha-icon
+                    .icon=${oscillating
+                        ? "mdi:arrow-oscillating"
+                        : "mdi:arrow-oscillating-off"}
+                ></ha-icon>
+            </mushroom-button>
         `;
     }
 
diff --git a/src/cards/light-card/light-card.ts b/src/cards/light-card/light-card.ts
index be32e66c3..a2153d801 100644
--- a/src/cards/light-card/light-card.ts
+++ b/src/cards/light-card/light-card.ts
@@ -261,10 +261,9 @@ export class LightCard extends MushroomBaseCard implements LovelaceCard {
         return html`
             ${otherControls.map(
                 (ctrl) => html`
-                    <mushroom-button
-                        .icon=${CONTROLS_ICONS[ctrl]}
-                        @click=${(e) => this._onControlTap(ctrl, e)}
-                    />
+                    <mushroom-button @click=${(e) => this._onControlTap(ctrl, e)}>
+                        <ha-icon .icon=${CONTROLS_ICONS[ctrl]}></ha-icon>
+                    </mushroom-button>
                 `
             )}
         `;
diff --git a/src/cards/lock-card/controls/lock-buttons-control.ts b/src/cards/lock-card/controls/lock-buttons-control.ts
index c627b6f92..d21bab6c6 100644
--- a/src/cards/lock-card/controls/lock-buttons-control.ts
+++ b/src/cards/lock-card/controls/lock-buttons-control.ts
@@ -54,7 +54,7 @@ export class LockButtonsControl extends LitElement {
 
     @property({ attribute: false }) public entity!: LockEntity;
 
-    @property() public fill: boolean = false;
+    @property({ type: Boolean })  public fill: boolean = false;
 
     private callService(e: CustomEvent) {
         e.stopPropagation();
@@ -73,14 +73,15 @@ export class LockButtonsControl extends LitElement {
                 >${LOCK_BUTTONS.filter((item) => item.isVisible(this.entity)).map(
                     (item) => html`
                         <mushroom-button
-                            .icon=${item.icon}
                             .entry=${item}
                             .title=${item.title
                                 ? customLocalize(`editor.card.lock.${item.title}`)
                                 : ""}
                             .disabled=${!isAvailable(this.entity) || item.isDisabled(this.entity)}
                             @click=${this.callService}
-                        ></mushroom-button>
+                        >
+                            <ha-icon .icon=${item.icon}></ha-icon>
+                        </mushroom-button>
                     `
                 )}</mushroom-button-group
             >
diff --git a/src/cards/media-player-card/controls/media-player-media-control.ts b/src/cards/media-player-card/controls/media-player-media-control.ts
index cda8ec7d7..5466c7433 100644
--- a/src/cards/media-player-card/controls/media-player-media-control.ts
+++ b/src/cards/media-player-card/controls/media-player-media-control.ts
@@ -17,7 +17,7 @@ export class MediaPlayerMediaControls extends LitElement {
 
     @property({ attribute: false }) public controls!: MediaPlayerMediaControl[];
 
-    @property() public fill: boolean = false;
+    @property({ type: Boolean })  public fill: boolean = false;
 
     private _handleClick(e: MouseEvent): void {
         e.stopPropagation();
@@ -34,11 +34,9 @@ export class MediaPlayerMediaControls extends LitElement {
             <mushroom-button-group .fill=${this.fill} ?rtl=${rtl}>
                 ${controls.map(
                     (control) => html`
-                        <mushroom-button
-                            .icon=${control.icon}
-                            .action=${control.action}
-                            @click=${this._handleClick}
-                        ></mushroom-button>
+                        <mushroom-button .action=${control.action} @click=${this._handleClick}>
+                            <ha-icon .icon=${control.icon}></ha-icon>
+                        </mushroom-button>
                     `
                 )}
             </mushroom-button-group>
diff --git a/src/cards/media-player-card/controls/media-player-volume-control.ts b/src/cards/media-player-card/controls/media-player-volume-control.ts
index 5db98c119..91841dd28 100644
--- a/src/cards/media-player-card/controls/media-player-volume-control.ts
+++ b/src/cards/media-player-card/controls/media-player-volume-control.ts
@@ -31,7 +31,7 @@ export class MediaPlayerVolumeControls extends LitElement {
 
     @property({ attribute: false }) public entity!: MediaPlayerEntity;
 
-    @property() public fill: boolean = false;
+    @property({ type: Boolean })  public fill: boolean = false;
 
     @property({ attribute: false }) public controls!: MediaPlayerVolumeControl[];
 
@@ -97,21 +97,25 @@ export class MediaPlayerVolumeControls extends LitElement {
                     ? html`
                           <mushroom-button
                               .action=${"volume_mute"}
-                              .icon=${this.entity.attributes.is_volume_muted
-                                  ? "mdi:volume-off"
-                                  : "mdi:volume-high"}
                               .disabled=${!isAvailable(this.entity) || isOff(this.entity)}
                               @click=${this.handleClick}
-                          ></mushroom-button>
+                          >
+                              <ha-icon
+                                  .icon=${this.entity.attributes.is_volume_muted
+                                      ? "mdi:volume-off"
+                                      : "mdi:volume-high"}
+                              ></ha-icon>
+                          </mushroom-button>
                       `
                     : undefined}
                 ${displayVolumeButtons
                     ? html`
                           <mushroom-button
                               .action=${"volume_down"}
-                              icon="mdi:volume-minus"
                               .disabled=${!isAvailable(this.entity) || isOff(this.entity)}
                               @click=${this.handleClick}
+                          >
+                              <ha-icon icon="mdi:volume-minus"></ha-icon
                           ></mushroom-button>
                       `
                     : undefined}
@@ -122,6 +126,8 @@ export class MediaPlayerVolumeControls extends LitElement {
                               icon="mdi:volume-plus"
                               .disabled=${!isAvailable(this.entity) || isOff(this.entity)}
                               @click=${this.handleClick}
+                          >
+                              <ha-icon icon="mdi:volume-plus"></ha-icon
                           ></mushroom-button>
                       `
                     : undefined}
diff --git a/src/cards/media-player-card/media-player-card.ts b/src/cards/media-player-card/media-player-card.ts
index f7b8b7239..3526058e9 100644
--- a/src/cards/media-player-card/media-player-card.ts
+++ b/src/cards/media-player-card/media-player-card.ts
@@ -219,10 +219,9 @@ export class MediaPlayerCard extends MushroomBaseCard implements LovelaceCard {
         return html`
             ${otherControls.map(
                 (ctrl) => html`
-                    <mushroom-button
-                        .icon=${CONTROLS_ICONS[ctrl]}
-                        @click=${(e) => this._onControlTap(ctrl, e)}
-                    />
+                    <mushroom-button @click=${(e) => this._onControlTap(ctrl, e)}>
+                        <ha-icon .icon=${CONTROLS_ICONS[ctrl]}></ha-icon>
+                    </mushroom-button>
                 `
             )}
         `;
diff --git a/src/cards/update-card/controls/update-buttons-control.ts b/src/cards/update-card/controls/update-buttons-control.ts
index 0ee6e8101..bf7665fac 100644
--- a/src/cards/update-card/controls/update-buttons-control.ts
+++ b/src/cards/update-card/controls/update-buttons-control.ts
@@ -17,7 +17,7 @@ export class UpdateButtonsControl extends LitElement {
 
     @property({ attribute: false }) public entity!: UpdateEntity;
 
-    @property() public fill: boolean = false;
+    @property({ type: Boolean }) public fill: boolean = false;
 
     private _handleInstall(): void {
         this.hass.callService("update", "install", {
@@ -53,16 +53,12 @@ export class UpdateButtonsControl extends LitElement {
 
         return html`
             <mushroom-button-group .fill=${this.fill} ?rtl=${rtl}>
-                <mushroom-button
-                    icon="mdi:cancel"
-                    .disabled=${this.skipDisabled}
-                    @click=${this._handleSkip}
-                ></mushroom-button>
-                <mushroom-button
-                    icon="mdi:cellphone-arrow-down"
-                    .disabled=${this.installDisabled}
-                    @click=${this._handleInstall}
-                ></mushroom-button>
+                <mushroom-button .disabled=${this.skipDisabled} @click=${this._handleSkip}>
+                    <ha-icon icon="mdi:cancel"></ha-icon>
+                </mushroom-button>
+                <mushroom-button .disabled=${this.installDisabled} @click=${this._handleInstall}>
+                    <ha-icon icon="mdi:cellphone-arrow-down"></ha-icon>
+                </mushroom-button>
             </mushroom-button-group>
         `;
     }
diff --git a/src/cards/vacuum-card/controls/vacuum-commands-control.ts b/src/cards/vacuum-card/controls/vacuum-commands-control.ts
index 546ec2701..ee689eca8 100644
--- a/src/cards/vacuum-card/controls/vacuum-commands-control.ts
+++ b/src/cards/vacuum-card/controls/vacuum-commands-control.ts
@@ -116,7 +116,7 @@ export class CoverButtonsControl extends LitElement {
 
     @property({ attribute: false }) public commands!: VacuumCommand[];
 
-    @property() public fill: boolean = false;
+    @property({ type: Boolean }) public fill: boolean = false;
 
     private callService(e: CustomEvent) {
         e.stopPropagation();
@@ -134,11 +134,12 @@ export class CoverButtonsControl extends LitElement {
                 ${VACUUM_BUTTONS.filter((item) => item.isVisible(this.entity, this.commands)).map(
                     (item) => html`
                         <mushroom-button
-                            .icon=${item.icon}
                             .entry=${item}
                             .disabled=${!isAvailable(this.entity) || item.isDisabled(this.entity)}
                             @click=${this.callService}
-                        ></mushroom-button>
+                        >
+                            <ha-icon .icon=${item.icon}></ha-icon>
+                        </mushroom-button>
                     `
                 )}
             </mushroom-button-group>
diff --git a/src/shared/button.ts b/src/shared/button.ts
index 326dd61fb..20cbbff53 100644
--- a/src/shared/button.ts
+++ b/src/shared/button.ts
@@ -3,14 +3,13 @@ import { property, customElement } from "lit/decorators.js";
 
 @customElement("mushroom-button")
 export class Button extends LitElement {
-    @property() public icon: string = "";
     @property() public title: string = "";
     @property({ type: Boolean }) public disabled: boolean = false;
 
     protected render(): TemplateResult {
         return html`
             <button type="button" class="button" .title=${this.title} .disabled=${this.disabled}>
-                <ha-icon .icon=${this.icon} />
+                <slot> </slot>
             </button>
         `;
     }
@@ -47,12 +46,12 @@ export class Button extends LitElement {
                 cursor: not-allowed;
                 background-color: var(--bg-color-disabled);
             }
-            .button ha-icon {
+            .button ::slotted(*) {
                 --mdc-icon-size: var(--control-icon-size);
                 color: var(--icon-color);
                 pointer-events: none;
             }
-            .button:disabled ha-icon {
+            .button:disabled ::slotted(*) {
                 color: var(--icon-color-disabled);
             }
         `;