Fix RTL icon placement (#14019)

* Fix RTL icon placement

* Fix combo box icons

* Removed duplicate after merge

* Refactor ha-button

* Refactor fix 2

src/components/entity/ha-entity-picker.ts

@@ -1,3 +1,4 @@
+import "../ha-list-item";
 import { HassEntity } from "home-assistant-js-websocket";
 import { html, LitElement, PropertyValues, TemplateResult } from "lit";
 import { ComboBoxLitRenderer } from "@vaadin/combo-box/lit";
@@ -9,7 +10,6 @@ import { computeStateName } from "../../common/entity/compute_state_name";
 import { caseInsensitiveStringCompare } from "../../common/string/compare";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
-import "../ha-list-item";
 import "../ha-combo-box";
 import type { HaComboBox } from "../ha-combo-box";
 import "../ha-icon-button";

src/components/ha-button.ts

@@ -0,0 +1,24 @@
+import { Button } from "@material/mwc-button";
+import { css } from "lit";
+import { customElement } from "lit/decorators";
+import { styles } from "@material/mwc-button/styles.css";
+
+@customElement("ha-button")
+export class HaButton extends Button {
+  static override styles = [
+    styles,
+    css`
+      ::slotted([slot="icon"]) {
+        margin-inline-start: 0px;
+        margin-inline-end: 8px;
+        direction: var(--direction);
+      }
+    `,
+  ];
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ha-button": HaButton;
+  }
+}

src/components/ha-combo-box.ts

@@ -16,7 +16,6 @@ import { fireEvent } from "../common/dom/fire_event";
 import { HomeAssistant } from "../types";
 import "./ha-list-item";
 import "./ha-icon-button";
-import "./ha-textfield";
 import type { HaTextField } from "./ha-textfield";
 
 registerStyles(

src/panels/config/automation/action/ha-automation-action.ts

@@ -11,6 +11,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import { stringCompare } from "../../../../common/string/compare";
 import { LocalizeFunc } from "../../../../common/translations/localize";
 import "../../../../components/ha-button-menu";
+import "../../../../components/ha-button";
 import type { HaSelect } from "../../../../components/ha-select";
 import "../../../../components/ha-svg-icon";
 import { ACTION_TYPES } from "../../../../data/action";
@@ -132,7 +133,7 @@ export default class HaAutomationAction extends LitElement {
         @action=${this._addAction}
         .disabled=${this.disabled}
       >
-        <mwc-button
+        <ha-button
           slot="trigger"
           outlined
           .disabled=${this.disabled}
@@ -141,7 +142,7 @@ export default class HaAutomationAction extends LitElement {
           )}
         >
           <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
-        </mwc-button>
+        </ha-button>
         ${this._processedTypes(this.hass.localize).map(
           ([opt, label, icon]) => html`
             <mwc-list-item .value=${opt} graphic="icon">

src/panels/config/automation/action/types/ha-automation-action-choose.ts

@@ -4,6 +4,7 @@ import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../../../../common/dom/fire_event";
 import { ensureArray } from "../../../../../common/array/ensure-array";
 import "../../../../../components/ha-icon-button";
+import "../../../../../components/ha-button";
 import { Condition } from "../../../../../data/automation";
 import { Action, ChooseAction } from "../../../../../data/script";
 import { haStyle } from "../../../../../resources/styles";
@@ -80,7 +81,7 @@ export class HaChooseAction extends LitElement implements ActionElement {
           </div>
         </ha-card>`
       )}
-      <mwc-button
+      <ha-button
         outlined
         .label=${this.hass.localize(
           "ui.panel.config.automation.editor.actions.type.choose.add_option"
@@ -89,7 +90,7 @@ export class HaChooseAction extends LitElement implements ActionElement {
         @click=${this._addOption}
       >
         <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
-      </mwc-button>
+      </ha-button>
       ${this._showDefault || action.default
         ? html`
             <h2>
@@ -196,6 +197,9 @@ export class HaChooseAction extends LitElement implements ActionElement {
         ha-icon-button {
           position: absolute;
           right: 0;
+          inset-inline-start: initial;
+          inset-inline-end: 0;
+          direction: var(--direction);
           padding: 4px;
         }
         ha-svg-icon {

src/panels/config/automation/condition/ha-automation-condition.ts

@@ -8,6 +8,7 @@ import { repeat } from "lit/directives/repeat";
 import memoizeOne from "memoize-one";
 import type { SortableEvent } from "sortablejs";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import "../../../../components/ha-button";
 import "../../../../components/ha-button-menu";
 import "../../../../components/ha-svg-icon";
 import type { Condition } from "../../../../data/automation";
@@ -177,7 +178,7 @@ export default class HaAutomationCondition extends LitElement {
         @action=${this._addCondition}
         .disabled=${this.disabled}
       >
-        <mwc-button
+        <ha-button
           slot="trigger"
           outlined
           .disabled=${this.disabled}
@@ -186,7 +187,7 @@ export default class HaAutomationCondition extends LitElement {
           )}
         >
           <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
-        </mwc-button>
+        </ha-button>
         ${this._processedTypes(this.hass.localize).map(
           ([opt, label, icon]) => html`
             <mwc-list-item .value=${opt} graphic="icon">

src/panels/config/automation/trigger/ha-automation-trigger.ts

@@ -11,6 +11,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import { stringCompare } from "../../../../common/string/compare";
 import type { LocalizeFunc } from "../../../../common/translations/localize";
 import "../../../../components/ha-button-menu";
+import "../../../../components/ha-button";
 import type { HaSelect } from "../../../../components/ha-select";
 import "../../../../components/ha-svg-icon";
 import { Trigger } from "../../../../data/automation";
@@ -125,7 +126,7 @@ export default class HaAutomationTrigger extends LitElement {
         )}
         </div>
         <ha-button-menu @action=${this._addTrigger} .disabled=${this.disabled}>
-          <mwc-button
+          <ha-button
             slot="trigger"
             outlined
             .label=${this.hass.localize(
@@ -134,7 +135,7 @@ export default class HaAutomationTrigger extends LitElement {
             .disabled=${this.disabled}
           >
             <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
-          </mwc-button>
+          </ha-button>
           ${this._processedTypes(this.hass.localize).map(
             ([opt, label, icon]) => html`
               <mwc-list-item .value=${opt} graphic="icon">

src/panels/config/logs/ha-config-logs.ts

@@ -4,6 +4,7 @@ import { customElement, property, query, state } from "lit/decorators";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { extractSearchParam } from "../../../common/url/search-params";
 import "../../../components/ha-button-menu";
+import "../../../components/ha-button";
 import "../../../components/search-input";
 import { LogProvider } from "../../../data/error_log";
 import { fetchHassioAddonsInfo } from "../../../data/hassio/addon";
@@ -115,7 +116,7 @@ export class HaConfigLogs extends LitElement {
         this.hass.userData?.showAdvanced
           ? html`
               <ha-button-menu corner="BOTTOM_START" slot="toolbar-icon">
-                <mwc-button
+                <ha-button
                   slot="trigger"
                   .label=${this._logProviders.find(
                     (p) => p.key === this._selectedLogProvider
@@ -125,7 +126,7 @@ export class HaConfigLogs extends LitElement {
                     slot="trailingIcon"
                     .path=${mdiChevronDown}
                   ></ha-svg-icon>
-                </mwc-button>
+                </ha-button>
                 ${this._logProviders.map(
                   (provider) => html`
                     <mwc-list-item

src/panels/lovelace/editor/config-elements/hui-tile-card-features-editor.ts

@@ -15,6 +15,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import { stopPropagation } from "../../../../common/dom/stop_propagation";
 import "../../../../components/entity/ha-entity-picker";
 import "../../../../components/ha-icon-button";
+import "../../../../components/ha-button";
 import "../../../../components/ha-svg-icon";
 import { sortableStyles } from "../../../../resources/ha-sortable-style";
 import {
@@ -160,7 +161,7 @@ export class HuiTileCardFeaturesEditor extends LitElement {
                   @action=${this._addFeature}
                   @closed=${stopPropagation}
                 >
-                  <mwc-button
+                  <ha-button
                     slot="trigger"
                     outlined
                     .label=${this.hass!.localize(
@@ -168,7 +169,7 @@ export class HuiTileCardFeaturesEditor extends LitElement {
                     )}
                   >
                     <ha-svg-icon .path=${mdiPlus} slot="icon"></ha-svg-icon>
-                  </mwc-button>
+                  </ha-button>
                   ${this._supportedFeatureTypes.map(
                     (featureType) => html`<mwc-list-item .value=${featureType}>
                       <ha-svg-icon

src/panels/media-browser/ha-bar-media-player.ts

@@ -30,6 +30,7 @@ import { computeStateName } from "../../common/entity/compute_state_name";
 import { domainIcon } from "../../common/entity/domain_icon";
 import { supportsFeature } from "../../common/entity/supports-feature";
 import "../../components/ha-button-menu";
+import "../../components/ha-button";
 import "../../components/ha-circular-progress";
 import "../../components/ha-icon-button";
 import { UNAVAILABLE } from "../../data/entity";
@@ -323,7 +324,7 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
                     ></ha-icon-button>
                   `
                 : html`
-                    <mwc-button
+                    <ha-button
                       slot="trigger"
                       .label=${this.narrow
                         ? ""
@@ -344,7 +345,7 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
                         slot="trailingIcon"
                         .path=${mdiChevronDown}
                       ></ha-svg-icon>
-                    </mwc-button>
+                    </ha-button>
                   `
             }
             <mwc-list-item
@@ -720,11 +721,6 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
         font-weight: bold;
       }
 
-      ha-svg-icon[slot="icon"] {
-        margin-inline-start: 8px !important;
-        margin-inline-end: 8px !important;
-        direction: var(--direction);
-      }
       ha-svg-icon[slot="trailingIcon"] {
         margin-inline-start: 8px !important;
         margin-inline-end: 0px !important;