mui · arminmeh · Aug 21, 2025 · Aug 21, 2025
diff --git a/docs/data/data-grid/components/CustomSortIcons.js b/docs/data/data-grid/components/CustomSortIcons.js
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import SortIcon from '@mui/icons-material/Sort';
 import { DataGrid } from '@mui/x-data-grid';
 
 export function SortedDescendingIcon() {
@@ -11,6 +12,10 @@ export function SortedAscendingIcon() {
   return <ExpandLessIcon className="icon" />;
 }
 
+export function UnsortedIcon() {
+  return <SortIcon className="icon" />;
+}
+
 const rows = [
   {
     id: 1,
@@ -41,6 +46,7 @@ export default function CustomSortIcons() {
         slots={{
           columnSortedDescendingIcon: SortedDescendingIcon,
           columnSortedAscendingIcon: SortedAscendingIcon,
+          columnUnsortedIcon: UnsortedIcon,
         }}
       />
     </div>

diff --git a/docs/data/data-grid/components/CustomSortIcons.tsx b/docs/data/data-grid/components/CustomSortIcons.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import SortIcon from '@mui/icons-material/Sort';
 import { DataGrid } from '@mui/x-data-grid';
 
 export function SortedDescendingIcon() {
@@ -11,6 +12,10 @@ export function SortedAscendingIcon() {
   return <ExpandLessIcon className="icon" />;
 }
 
+export function UnsortedIcon() {
+  return <SortIcon className="icon" />;
+}
+
 const rows = [
   {
     id: 1,
@@ -41,6 +46,7 @@ export default function CustomSortIcons() {
         slots={{
           columnSortedDescendingIcon: SortedDescendingIcon,
           columnSortedAscendingIcon: SortedAscendingIcon,
+          columnUnsortedIcon: UnsortedIcon,
         }}
       />
     </div>

diff --git a/docs/data/data-grid/components/CustomSortIcons.tsx.preview b/docs/data/data-grid/components/CustomSortIcons.tsx.preview
@@ -7,5 +7,6 @@
   slots={{
     columnSortedDescendingIcon: SortedDescendingIcon,
     columnSortedAscendingIcon: SortedAscendingIcon,
+    columnUnsortedIcon: UnsortedIcon,
   }}
 />
diff --git a/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md b/docs/data/migration/migration-data-grid-v7/migration-data-grid-v7.md
@@ -401,7 +401,6 @@ You have to import it from `@mui/x-license` instead:
 - The `baseInputAdornment` slot was removed.
 - The `pagination` slot has been mostly refactored to `basePagination`.
 - The `paper` slot has been renamed to `panelContent`.
-- The `columnUnsortedIcon` slot was removed.
 - The icon slots now require material icons to be passed like `Icon as any`.
   Note: This is due to typing issues that might be resolved later.
 

diff --git a/docs/pages/x/api/data-grid/data-grid-premium.json b/docs/pages/x/api/data-grid/data-grid-premium.json
@@ -1087,6 +1087,12 @@
       "default": "GridColumnIcon",
       "class": null
     },
+    {
+      "name": "columnUnsortedIcon",
+      "description": "Icon displayed on the side of the column header title when unsorted.",
+      "default": "GridColumnUnsortedIcon",
+      "class": null
+    },
     {
       "name": "columnSortedAscendingIcon",
       "description": "Icon displayed on the side of the column header title when sorted in ascending order.",

diff --git a/docs/pages/x/api/data-grid/data-grid-pro.json b/docs/pages/x/api/data-grid/data-grid-pro.json
@@ -911,6 +911,12 @@
       "default": "GridColumnIcon",
       "class": null
     },
+    {
+      "name": "columnUnsortedIcon",
+      "description": "Icon displayed on the side of the column header title when unsorted.",
+      "default": "GridColumnUnsortedIcon",
+      "class": null
+    },
     {
       "name": "columnSortedAscendingIcon",
       "description": "Icon displayed on the side of the column header title when sorted in ascending order.",

diff --git a/docs/pages/x/api/data-grid/data-grid.json b/docs/pages/x/api/data-grid/data-grid.json
@@ -784,6 +784,12 @@
       "default": "GridColumnIcon",
       "class": null
     },
+    {
+      "name": "columnUnsortedIcon",
+      "description": "Icon displayed on the side of the column header title when unsorted.",
+      "default": "GridColumnUnsortedIcon",
+      "class": null
+    },
     {
       "name": "columnSortedAscendingIcon",
       "description": "Icon displayed on the side of the column header title when sorted in ascending order.",

diff --git a/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json b/docs/translations/api-docs/data-grid/data-grid-premium/data-grid-premium.json
@@ -1842,6 +1842,7 @@
     "columnSortedAscendingIcon": "Icon displayed on the side of the column header title when sorted in ascending order.",
     "columnSortedDescendingIcon": "Icon displayed on the side of the column header title when sorted in descending order.",
     "columnsPanel": "GridColumns panel component rendered when clicking the columns button.",
+    "columnUnsortedIcon": "Icon displayed on the side of the column header title when unsorted.",
     "densityComfortableIcon": "Icon displayed on the &quot;comfortable&quot; density option in the toolbar.",
     "densityCompactIcon": "Icon displayed on the compact density option in the toolbar.",
     "densityStandardIcon": "Icon displayed on the standard density option in the toolbar.",

diff --git a/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json b/docs/translations/api-docs/data-grid/data-grid-pro/data-grid-pro.json
@@ -1663,6 +1663,7 @@
     "columnSortedAscendingIcon": "Icon displayed on the side of the column header title when sorted in ascending order.",
     "columnSortedDescendingIcon": "Icon displayed on the side of the column header title when sorted in descending order.",
     "columnsPanel": "GridColumns panel component rendered when clicking the columns button.",
+    "columnUnsortedIcon": "Icon displayed on the side of the column header title when unsorted.",
     "densityComfortableIcon": "Icon displayed on the &quot;comfortable&quot; density option in the toolbar.",
     "densityCompactIcon": "Icon displayed on the compact density option in the toolbar.",
     "densityStandardIcon": "Icon displayed on the standard density option in the toolbar.",

diff --git a/docs/translations/api-docs/data-grid/data-grid/data-grid.json b/docs/translations/api-docs/data-grid/data-grid/data-grid.json
@@ -1511,6 +1511,7 @@
     "columnSortedAscendingIcon": "Icon displayed on the side of the column header title when sorted in ascending order.",
     "columnSortedDescendingIcon": "Icon displayed on the side of the column header title when sorted in descending order.",
     "columnsPanel": "GridColumns panel component rendered when clicking the columns button.",
+    "columnUnsortedIcon": "Icon displayed on the side of the column header title when unsorted.",
     "densityComfortableIcon": "Icon displayed on the &quot;comfortable&quot; density option in the toolbar.",
     "densityCompactIcon": "Icon displayed on the compact density option in the toolbar.",
     "densityStandardIcon": "Icon displayed on the standard density option in the toolbar.",

diff --git a/packages/x-data-grid/src/components/GridColumnSortButton.tsx b/packages/x-data-grid/src/components/GridColumnSortButton.tsx
@@ -10,7 +10,6 @@ import { getDataGridUtilityClass } from '../constants/gridClasses';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { DataGridProcessedProps } from '../models/props/DataGridProps';
 import { vars } from '../constants/cssVariables';
-import { GridColumnUnsortedIcon } from './GridColumnUnsortedIcon';
 import { NotRendered } from '../utils/assert';
 
 export type GridColumnSortButtonProps = GridSlotProps['baseIconButton'] & {
@@ -61,7 +60,7 @@ function getIcon(
   } else if (direction === 'desc') {
     Icon = icons.columnSortedDescendingIcon;
   } else {
-    Icon = GridColumnUnsortedIcon;
+    Icon = icons.columnUnsortedIcon;
     iconProps.sortingOrder = sortingOrder;
   }
   return Icon ? <Icon fontSize="small" className={className} {...iconProps} /> : null;

diff --git a/packages/x-data-grid/src/components/GridColumnUnsortedIcon.tsx b/packages/x-data-grid/src/components/GridColumnUnsortedIcon.tsx
@@ -3,7 +3,7 @@ import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { GridBaseIconProps } from '../models/gridSlotsComponentsProps';
 import { GridSortDirection } from '../models/gridSortModel';
 
-interface GridColumnUnsortedIconProps extends GridBaseIconProps {
+export interface GridColumnUnsortedIconProps extends GridBaseIconProps {
   sortingOrder: GridSortDirection[];
 }
 

diff --git a/packages/x-data-grid/src/material/index.tsx b/packages/x-data-grid/src/material/index.tsx
@@ -65,6 +65,7 @@ import type { GridIconSlotsComponent } from '../models';
 import type { GridBaseSlots } from '../models/gridSlotsComponent';
 import type { GridSlotProps as P } from '../models/gridSlotsComponentsProps';
 import type { PopperProps } from '../models/gridBaseSlots';
+import { GridColumnUnsortedIcon } from '../components/GridColumnUnsortedIcon';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 
@@ -633,6 +634,7 @@ const iconSlots: GridIconSlotsComponent = {
   filterPanelDeleteIcon: GridCloseIcon,
   columnFilteredIcon: GridFilterAltIcon,
   columnSelectorIcon: GridColumnIcon,
+  columnUnsortedIcon: GridColumnUnsortedIcon,
   columnSortedAscendingIcon: GridArrowUpwardIcon,
   columnSortedDescendingIcon: GridArrowDownwardIcon,
   columnResizeIcon: GridSeparatorIcon,

diff --git a/packages/x-data-grid/src/models/gridIconSlotsComponent.ts b/packages/x-data-grid/src/models/gridIconSlotsComponent.ts
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { IconProps } from './gridBaseSlots';
+import type { GridColumnUnsortedIconProps } from '../components/GridColumnUnsortedIcon';
 
 /**
  * Set of icons used in the grid component UI.
@@ -35,6 +36,11 @@ export interface GridIconSlotsComponent {
    * @default GridColumnIcon
    */
   columnSelectorIcon: React.JSXElementConstructor<IconProps>;
+  /**
+   * Icon displayed on the side of the column header title when unsorted.
+   * @default GridColumnUnsortedIcon
+   */
+  columnUnsortedIcon: React.JSXElementConstructor<GridColumnUnsortedIconProps> | null;
   /**
    * Icon displayed on the side of the column header title when sorted in ascending order.
    * @default GridArrowUpwardIcon