Repository: mui/material-ui (TypeScript)
Date: 2018-08-23 13:22:36+00:00
Task type: Feature

Issue:
Custom TableSortLabel icon
<!--- Provide a general summary of the feature in the Title above -->
I would like to have an option of overriding default sort icon. I've looked to [TableSortLabel source](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/TableSortLabel/TableSortLabel.js#L69) and discovered that this component uses ArrowDownward icon and I can't see a way to change it.



Issue discussion:
We can add an `IconComponent` property. Feel free to work on it :).
great, I'll work on it.

Solution patch:
diff --git a/packages/material-ui/src/TableSortLabel/TableSortLabel.d.ts b/packages/material-ui/src/TableSortLabel/TableSortLabel.d.ts
--- a/packages/material-ui/src/TableSortLabel/TableSortLabel.d.ts
+++ b/packages/material-ui/src/TableSortLabel/TableSortLabel.d.ts
@@ -1,11 +1,13 @@
 import * as React from 'react';
 import { StandardProps } from '..';
 import { ButtonBaseProps } from '../ButtonBase';
+import { SvgIconProps } from '../SvgIcon';
 
 export interface TableSortLabelProps
   extends StandardProps<ButtonBaseProps, TableSortLabelClassKey> {
   active?: boolean;
   direction?: 'asc' | 'desc';
+  IconComponent?: React.ComponentType<SvgIconProps>;
 }
 
 export type TableSortLabelClassKey =
diff --git a/packages/material-ui/src/TableSortLabel/TableSortLabel.js b/packages/material-ui/src/TableSortLabel/TableSortLabel.js
--- a/packages/material-ui/src/TableSortLabel/TableSortLabel.js
+++ b/packages/material-ui/src/TableSortLabel/TableSortLabel.js
@@ -56,7 +56,7 @@ export const styles = theme => ({
  * A button based label for placing inside `TableCell` for column sorting.
  */
 function TableSortLabel(props) {
-  const { active, classes, className, children, direction, ...other } = props;
+  const { active, classes, className, children, direction, IconComponent, ...other } = props;
 
   return (
     <ButtonBase
@@ -66,7 +66,7 @@ function TableSortLabel(props) {
       {...other}
     >
       {children}
-      <ArrowDownwardIcon
+      <IconComponent
         className={classNames(classes.icon, classes[`iconDirection${capitalize(direction)}`])}
       />
     </ButtonBase>
@@ -95,11 +95,16 @@ TableSortLabel.propTypes = {
    * The current sort direction.
    */
   direction: PropTypes.oneOf(['asc', 'desc']),
+  /**
+   * Sort icon to use.
+   */
+  IconComponent: PropTypes.func,
 };
 
 TableSortLabel.defaultProps = {
   active: false,
   direction: 'desc',
+  IconComponent: ArrowDownwardIcon,
 };
 
 export default withStyles(styles, { name: 'MuiTableSortLabel' })(TableSortLabel);
diff --git a/pages/api/table-sort-label.md b/pages/api/table-sort-label.md
--- a/pages/api/table-sort-label.md
+++ b/pages/api/table-sort-label.md
@@ -19,6 +19,7 @@ A button based label for placing inside `TableCell` for column sorting.
 | <span class="prop-name">children</span> | <span class="prop-type">node |   | Label contents, the arrow will be appended automatically. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object |   | Override or extend the styles applied to the component. See [CSS API](#css-api) below for more details. |
 | <span class="prop-name">direction</span> | <span class="prop-type">enum:&nbsp;'asc'&nbsp;&#124;<br>&nbsp;'desc'<br> | <span class="prop-default">'desc'</span> | The current sort direction. |
+| <span class="prop-name">IconComponent</span> | <span class="prop-type">func | <span class="prop-default">ArrowDownwardIcon</span> | Sort icon to use. |
 
 Any other properties supplied will be spread to the root element ([ButtonBase](/api/button-base)).
 


Test patch:
diff --git a/packages/material-ui/src/TableSortLabel/TableSortLabel.test.js b/packages/material-ui/src/TableSortLabel/TableSortLabel.test.js
--- a/packages/material-ui/src/TableSortLabel/TableSortLabel.test.js
+++ b/packages/material-ui/src/TableSortLabel/TableSortLabel.test.js
@@ -2,6 +2,7 @@ import React from 'react';
 import { assert } from 'chai';
 import { createShallow, createMount, getClasses } from '../test-utils';
 import TableSortLabel from './TableSortLabel';
+import Sort from '@material-ui/icons/Sort';
 
 describe('<TableSortLabel />', () => {
   let shallow;
@@ -62,6 +63,13 @@ describe('<TableSortLabel />', () => {
       assert.strictEqual(icon.hasClass(classes.iconDirectionAsc), true);
       assert.strictEqual(icon.hasClass(classes.iconDirectionDesc), false);
     });
+
+    it('should accept a custom icon for the sort icon', () => {
+      shallow = createShallow({ untilSelector: 'Sort' });
+      const wrapper = mount(<TableSortLabel IconComponent={Sort} />);
+      assert.strictEqual(wrapper.props().IconComponent, Sort);
+      assert.strictEqual(wrapper.find(Sort).length, 1);
+    });
   });
 
   describe('mount', () => {