fix(): flip-rtl works if dir="rtl" is set on icon directly (#1142)

Author: averyjohnston

src/components/icon/icon.tsx

@@ -1,6 +1,6 @@
 import { Build, Component, Element, Host, Prop, State, Watch, h } from '@stencil/core';
 import { getSvgContent, ioniconContent } from './request';
-import { getName, getUrl, inheritAttributes } from './utils';
+import { getName, getUrl, inheritAttributes, isRTL } from './utils';
 
 @Component({
   tag: 'ion-icon',
@@ -158,7 +158,7 @@ export class Icon {
   }
 
   render() {
-    const { iconName, ariaLabel, inheritedAttributes } = this;
+    const { iconName, ariaLabel, el, inheritedAttributes } = this;
     const mode = this.mode || 'md';
     const flipRtl =
       this.flipRtl ||
@@ -181,7 +181,7 @@ export class Icon {
           [mode]: true,
           ...createColorClasses(this.color),
           [`icon-${this.size}`]: !!this.size,
-          'flip-rtl': !!flipRtl && (this.el.ownerDocument as Document).dir === 'rtl',
+          'flip-rtl': !!flipRtl && isRTL(el),
         }}
         {...inheritedAttributes}
       >

src/components/icon/test/icon.e2e.ts-snapshots/icon-diff-Mobile-Chrome-linux.png

@@ -139,4 +139,18 @@ export const inheritAttributes = (el: HTMLElement, attributes: string[] = []) =>
   });
 
   return attributeObject;
-}
+}
+
+/**
+ * Returns `true` if the document or host element
+ * has a `dir` set to `rtl`. The host value will always
+ * take priority over the root document value.
+ */
+export const isRTL = (hostEl?: Pick<HTMLElement, 'dir'>) => {
+  if (hostEl) {
+    if (hostEl.dir !== '') {
+      return hostEl.dir.toLowerCase() === 'rtl';
+    }
+  }
+  return document?.dir.toLowerCase() === 'rtl';
+};

src/components/icon/test/icon.e2e.ts-snapshots/icon-diff-Mobile-Firefox-linux.png

@@ -124,6 +124,12 @@ <h2>Un-flip: chevrons</h2>
     <ion-icon name="chevron-down" flip-rtl="false"></ion-icon>
     <ion-icon name="chevron-back" flip-rtl="false"></ion-icon>
 
+    <h2>Auto Flip, RTL on components</h2>
+    <ion-icon name="arrow-up" dir="rtl" flip-rtl></ion-icon>
+    <ion-icon name="arrow-forward" dir="rtl" flip-rtl></ion-icon>
+    <ion-icon name="arrow-down" dir="rtl" flip-rtl></ion-icon>
+    <ion-icon name="arrow-back" dir="rtl" flip-rtl></ion-icon>
+
     <h2>Sanitized (shouldn't show)</h2>
     <ion-icon src="./assets/sanitize.svg"></ion-icon>