diff --git a/src/components/ha-clickable-list-item.ts b/src/components/ha-clickable-list-item.ts
index 793b9d1795..032a2be2ed 100644
--- a/src/components/ha-clickable-list-item.ts
+++ b/src/components/ha-clickable-list-item.ts
@@ -47,10 +47,6 @@ export class HaClickableListItem extends ListItemBase {
           padding-left: 0px;
           padding-right: 0px;
         }
-        :host([rtl]) span {
-          margin-left: var(--mdc-list-item-graphic-margin, 20px) !important;
-          margin-right: 0px !important;
-        }
         :host([graphic="avatar"]:not([twoLine])),
         :host([graphic="icon"]:not([twoLine])) {
           height: 48px;
@@ -64,6 +60,16 @@ export class HaClickableListItem extends ListItemBase {
           padding-right: var(--mdc-list-side-padding, 20px);
           overflow: hidden;
         }
+        :host-context([style*="direction: rtl;"])
+          span.material-icons:first-of-type {
+          margin-left: var(--mdc-list-item-graphic-margin, 16px) !important;
+          margin-right: 0px !important;
+        }
+        :host-context([style*="direction: rtl;"])
+          span.material-icons:last-of-type {
+          margin-left: 0px !important;
+          margin-right: auto !important;
+        }
       `,
     ];
   }