[Pagination] Allow customization of icons

docs/pages/api-docs/pagination-item.json

@@ -9,6 +9,13 @@
       "default": "'standard'"
     },
     "component": { "type": { "name": "elementType" } },
+    "components": {
+      "type": {
+        "name": "shape",
+        "description": "{ first?: elementType, last?: elementType, next?: elementType, previous?: elementType }"
+      },
+      "default": "{\n  first: FirstPageIcon,\n  last: LastPageIcon,\n  next: NavigateNextIcon,\n  previous: NavigateBeforeIcon,\n}"
+    },
     "disabled": { "type": { "name": "bool" } },
     "page": { "type": { "name": "node" } },
     "selected": { "type": { "name": "bool" } },

docs/src/pages/components/pagination/CustomIcons.js

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import Pagination from '@mui/material/Pagination';
+import PaginationItem from '@mui/material/PaginationItem';
+import Stack from '@mui/material/Stack';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+
+export default function CustomIcons() {
+  return (
+    <Stack spacing={2}>
+      <Pagination
+        count={10}
+        renderItem={(item) => (
+          <PaginationItem
+            components={{ previous: ArrowBackIcon, next: ArrowForwardIcon }}
+            {...item}
+          />
+        )}
+      />
+    </Stack>
+  );
+}

docs/src/pages/components/pagination/CustomIcons.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import Pagination from '@mui/material/Pagination';
+import PaginationItem from '@mui/material/PaginationItem';
+import Stack from '@mui/material/Stack';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
+
+export default function CustomIcons() {
+  return (
+    <Stack spacing={2}>
+      <Pagination
+        count={10}
+        renderItem={(item) => (
+          <PaginationItem
+            components={{ previous: ArrowBackIcon, next: ArrowForwardIcon }}
+            {...item}
+          />
+        )}
+      />
+    </Stack>
+  );
+}

docs/src/pages/components/pagination/CustomIcons.tsx.preview

@@ -0,0 +1,9 @@
+<Pagination
+  count={10}
+  renderItem={(item) => (
+    <PaginationItem
+      components={{ previous: ArrowBackIcon, next: ArrowForwardIcon }}
+      {...item}
+    />
+  )}
+/>

docs/src/pages/components/pagination/pagination.md

@@ -32,6 +32,12 @@ You can optionally enable first-page and last-page buttons, or disable the previ
 
 {{"demo": "pages/components/pagination/PaginationButtons.js"}}
 
+## Custom icons
+
+It's possible to customize the control icons.
+
+{{"demo": "pages/components/pagination/CustomIcons.js"}}
+
 ## Pagination ranges
 
 You can specify how many digits to display either side of current page with the `siblingRange` prop, and adjacent to the start and end page number with the `boundaryRange` prop.

docs/translations/api-docs/pagination-item/pagination-item.json

@@ -4,6 +4,7 @@
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
     "color": "The active color.",
     "component": "The component used for the root node. Either a string to use a HTML element or a component.",
+    "components": "The components used for first, last, next &amp; previous item type",
     "disabled": "If <code>true</code>, the component is disabled.",
     "page": "The current page number.",
     "selected": "If <code>true</code> the pagination item is selected.",

packages/mui-material/src/PaginationItem/PaginationItem.d.ts

@@ -26,6 +26,21 @@ export interface PaginationItemTypeMap<P = {}, D extends React.ElementType = 'di
       'standard' | 'primary' | 'secondary',
       PaginationItemPropsColorOverrides
     >;
+    /**
+     * The components used for first, last, next & previous item type
+     * @default {
+     *   first: FirstPageIcon,
+     *   last: LastPageIcon,
+     *   next: NavigateNextIcon,
+     *   previous: NavigateBeforeIcon,
+     * }
+     */
+    components?: {
+      first?: React.ElementType;
+      last?: React.ElementType;
+      next?: React.ElementType;
+      previous?: React.ElementType;
+    };
     /**
      * If `true`, the component is disabled.
      * @default false

packages/mui-material/src/PaginationItem/PaginationItem.js

@@ -244,6 +244,12 @@ const PaginationItem = React.forwardRef(function PaginationItem(inProps, ref) {
     className,
     color = 'standard',
     component,
+    components = {
+      first: FirstPageIcon,
+      last: LastPageIcon,
+      next: NavigateNextIcon,
+      previous: NavigateBeforeIcon,
+    },
     disabled = false,
     page,
     selected = false,
@@ -271,16 +277,16 @@ const PaginationItem = React.forwardRef(function PaginationItem(inProps, ref) {
   const normalizedIcons =
     theme.direction === 'rtl'
       ? {
-          previous: NavigateNextIcon,
-          next: NavigateBeforeIcon,
-          last: FirstPageIcon,
-          first: LastPageIcon,
+          previous: components.next || NavigateNextIcon,
+          next: components.previous || NavigateBeforeIcon,
+          last: components.first || FirstPageIcon,
+          first: components.last || LastPageIcon,
         }
       : {
-          previous: NavigateBeforeIcon,
-          next: NavigateNextIcon,
-          first: FirstPageIcon,
-          last: LastPageIcon,
+          previous: components.previous || NavigateBeforeIcon,
+          next: components.next || NavigateNextIcon,
+          first: components.first || FirstPageIcon,
+          last: components.last || LastPageIcon,
         };
 
   const Icon = normalizedIcons[type];
@@ -340,6 +346,21 @@ PaginationItem.propTypes /* remove-proptypes */ = {
    * Either a string to use a HTML element or a component.
    */
   component: PropTypes.elementType,
+  /**
+   * The components used for first, last, next & previous item type
+   * @default {
+   *   first: FirstPageIcon,
+   *   last: LastPageIcon,
+   *   next: NavigateNextIcon,
+   *   previous: NavigateBeforeIcon,
+   * }
+   */
+  components: PropTypes.shape({
+    first: PropTypes.elementType,
+    last: PropTypes.elementType,
+    next: PropTypes.elementType,
+    previous: PropTypes.elementType,
+  }),
   /**
    * If `true`, the component is disabled.
    * @default false