[Pagination] Missing RTL support

[charitha93]

I am currently using the material ui pagination and after passing the rtl option they appear as so

The order is correct but the arrowheads are facing the wrong way.

[eps1lon]

@hawky93 Please provide a full reproduction test case. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template is a good starting point. Thank you!

[oliviertassinari]

@hawky93 Thanks for the report. Regarding the reproduction, the steps are 1. navigate to https://material-ui.com/components/pagination/, 2. trigger RTL.
What do you think of the following patch? Do you want to work on a pull request? :)

diff --git a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js
index 0f5b0af71..5be28228f 100644
--- a/packages/material-ui-lab/src/PaginationItem/PaginationItem.js
+++ b/packages/material-ui-lab/src/PaginationItem/PaginationItem.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { fade, withStyles } from '@material-ui/core/styles';
+import { fade, withStyles, useTheme } from '@material-ui/core/styles';
 import ButtonBase from '@material-ui/core/ButtonBase';
 import FirstPageIcon from '../internal/svg-icons/FirstPage';
 import LastPageIcon from '../internal/svg-icons/LastPage';
@@ -207,6 +207,23 @@ const PaginationItem = React.forwardRef(function PaginationItem(props, ref) {
     variant = 'text',
     ...other
   } = props;
+  const theme = useTheme();
+
+  const normalizedIcons =
+    theme.direction === 'rtl'
+      ? {
+          previous: NavigateNextIcon,
+          next: NavigateBeforeIcon,
+          last: FirstPageIcon,
+          first: LastPageIcon,
+        }
+      : {
+          previous: NavigateBeforeIcon,
+          next: NavigateNextIcon,
+          first: FirstPageIcon,
+          last: LastPageIcon,
+        };
+  const Icon = normalizedIcons[type];

   return type === 'start-ellipsis' || type === 'end-ellipsis' ? (
     <div
@@ -240,10 +257,7 @@ const PaginationItem = React.forwardRef(function PaginationItem(props, ref) {
       {...other}
     >
       {type === 'page' && page}
-      {type === 'previous' && <NavigateBeforeIcon className={classes.icon} />}
-      {type === 'next' && <NavigateNextIcon className={classes.icon} />}
-      {type === 'first' && <FirstPageIcon className={classes.icon} />}
-      {type === 'last' && <LastPageIcon className={classes.icon} />}
+      {Icon ? <Icon className={classes.icon} /> : null}
     </ButtonBase>
   );
 });

[HenryLie]

I would like to take on this issue as my first contribution 😄

[MayarAhmed]

I still Face same Issue

"
Documentation and Demo:
https://mui.com/material-ui/guides/right-to-left/#demo

Pagination in RTL Demo:
https://codesandbox.io/s/direction-material-demo-forked-zdgsi8?file=/demo.js
"
from
https://stackoverflow.com/questions/72124471/pagination-rtl-next-and-previous-arrowsheads-are-facing-in-the-wrong-direction-m