[Button] Add startIcon / endIcon props

docs/pages/api/button.md

@@ -31,9 +31,11 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the button will be disabled. |
 | <span class="prop-name">disableFocusRipple</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the  keyboard focus ripple will be disabled. `disableRipple` must also be true. |
 | <span class="prop-name">disableRipple</span> | <span class="prop-type">bool</span> |  | If `true`, the ripple effect will be disabled.<br>⚠️ Without a ripple there is no styling for :focus-visible by default. Be sure to highlight the element by applying separate styles with the `focusVisibleClassName`. |
+| <span class="prop-name">endIcon</span> | <span class="prop-type">node</span> |  | Element placed after the children. |
 | <span class="prop-name">fullWidth</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the button will take up the full width of its container. |
 | <span class="prop-name">href</span> | <span class="prop-type">string</span> |  | The URL to link to when the button is clicked. If defined, an `a` element will be used as the root node. |
 | <span class="prop-name">size</span> | <span class="prop-type">'small'<br>&#124;&nbsp;'medium'<br>&#124;&nbsp;'large'</span> | <span class="prop-default">'medium'</span> | The size of the button. `small` is equivalent to the dense button styling. |
+| <span class="prop-name">startIcon</span> | <span class="prop-type">node</span> |  | Element placed before the children. |
 | <span class="prop-name">variant</span> | <span class="prop-type">'text'<br>&#124;&nbsp;'outlined'<br>&#124;&nbsp;'contained'</span> | <span class="prop-default">'text'</span> | The variant to use. |
 
 The `ref` is forwarded to the root element.
@@ -70,6 +72,11 @@ Any other props supplied will be provided to the root element ([ButtonBase](/api
 | <span class="prop-name">sizeSmall</span> | <span class="prop-name">MuiButton-sizeSmall</span> | Styles applied to the root element if `size="small"`.
 | <span class="prop-name">sizeLarge</span> | <span class="prop-name">MuiButton-sizeLarge</span> | Styles applied to the root element if `size="large"`.
 | <span class="prop-name">fullWidth</span> | <span class="prop-name">MuiButton-fullWidth</span> | Styles applied to the root element if `fullWidth={true}`.
+| <span class="prop-name">startIcon</span> | <span class="prop-name">MuiButton-startIcon</span> | Styles applied to the startIcon element if supplied.
+| <span class="prop-name">endIcon</span> | <span class="prop-name">MuiButton-endIcon</span> | Styles applied to the endIcon element if supplied.
+| <span class="prop-name">iconSizeSmall</span> | <span class="prop-name">MuiButton-iconSizeSmall</span> | Styles applied to the icon element if supplied and `size="small"`.
+| <span class="prop-name">iconSizeMedium</span> | <span class="prop-name">MuiButton-iconSizeMedium</span> | Styles applied to the icon element if supplied and `size="medium"`.
+| <span class="prop-name">iconSizeLarge</span> | <span class="prop-name">MuiButton-iconSizeLarge</span> | Styles applied to the icon element if supplied and `size="large"`.
 
 You can override the style of the component thanks to one of these customization points:
 

docs/src/modules/components/AppFrame.js

@@ -14,7 +14,7 @@ import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/Menu';
 import Tooltip from '@material-ui/core/Tooltip';
 import Button from '@material-ui/core/Button';
-import Hidden from '@material-ui/core/Hidden';
+import Box from '@material-ui/core/Box';
 import NoSsr from '@material-ui/core/NoSsr';
 import LanguageIcon from '@material-ui/icons/Translate';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
@@ -118,11 +118,15 @@ const styles = theme => ({
       position: 'absolute',
     },
   },
-  appBarHome: {
-    boxShadow: 'none',
-  },
   language: {
     margin: theme.spacing(0, 0.5, 0, 1),
+    display: 'none',
+    [theme.breakpoints.up('md')]: {
+      display: 'block',
+    },
+  },
+  appBarHome: {
+    boxShadow: 'none',
   },
   appBarShift: {
     [theme.breakpoints.up('lg')]: {
@@ -234,14 +238,12 @@ function AppFrame(props) {
               data-ga-event-action="language"
             >
               <LanguageIcon />
-              <Hidden xsDown implementation="css">
-                <span className={classes.language}>
-                  {userLanguage === 'aa'
-                    ? 'Translating'
-                    : LANGUAGES_LABEL.filter(language => language.code === userLanguage)[0].text}
-                </span>
-              </Hidden>
-              <ExpandMoreIcon />
+              <span className={classes.language}>
+                {userLanguage === 'aa'
+                  ? 'Translating'
+                  : LANGUAGES_LABEL.filter(language => language.code === userLanguage)[0].text}
+              </span>
+              <ExpandMoreIcon fontSize="small" />
             </Button>
           </Tooltip>
           <NoSsr>
@@ -260,12 +262,14 @@ function AppFrame(props) {
                   selected={userLanguage === language.code}
                   onClick={handleLanguageMenuClose}
                   lang={language.code}
-                  hreflang={language.code}
+                  hrefLang={language.code}
                 >
                   {language.text}
                 </MenuItem>
               ))}
-              <Divider />
+              <Box my={1}>
+                <Divider />
+              </Box>
               <MenuItem
                 component="a"
                 data-no-link="true"
@@ -278,7 +282,7 @@ function AppFrame(props) {
                 target="_blank"
                 key={userLanguage}
                 lang={userLanguage}
-                hreflang="en"
+                hrefLang="en"
                 onClick={handleLanguageMenuClose}
               >
                 {`${t('helpToTranslate')}`}

docs/src/modules/components/MarkdownDocs.js

@@ -75,12 +75,6 @@ const styles = theme => ({
     textTransform: 'none',
     fontWeight: theme.typography.fontWeightRegular,
   },
-  chevronLeftIcon: {
-    marginRight: theme.spacing(1),
-  },
-  chevronRightIcon: {
-    marginLeft: theme.spacing(1),
-  },
 });
 
 const SOURCE_CODE_ROOT_URL = 'https://github.com/mui-org/material-ui/blob/master/docs/src';
@@ -256,8 +250,8 @@ function MarkdownDocs(props) {
                     href={prevPage.pathname}
                     size="large"
                     className={classes.pageLinkButton}
+                    startIcon={<ChevronLeftIcon />}
                   >
-                    <ChevronLeftIcon fontSize="small" className={classes.chevronLeftIcon} />
                     {pageToTitleI18n(prevPage, t)}
                   </Button>
                 ) : (
@@ -270,9 +264,9 @@ function MarkdownDocs(props) {
                     href={nextPage.pathname}
                     size="large"
                     className={classes.pageLinkButton}
+                    endIcon={<ChevronRightIcon />}
                   >
                     {pageToTitleI18n(nextPage, t)}
-                    <ChevronRightIcon fontSize="small" className={classes.chevronRightIcon} />
                   </Button>
                 )}
               </div>

docs/src/pages/components/buttons/IconLabelButtons.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import clsx from 'clsx';
 import Button from '@material-ui/core/Button';
 import { makeStyles } from '@material-ui/core/styles';
 import DeleteIcon from '@material-ui/icons/Delete';
@@ -12,41 +11,51 @@ const useStyles = makeStyles(theme => ({
   button: {
     margin: theme.spacing(1),
   },
-  leftIcon: {
-    marginRight: theme.spacing(1),
-  },
-  rightIcon: {
-    marginLeft: theme.spacing(1),
-  },
-  iconSmall: {
-    fontSize: 20,
-  },
 }));
 
 export default function IconLabelButtons() {
   const classes = useStyles();
 
   return (
     <div>
-      <Button variant="contained" color="secondary" className={classes.button}>
+      <Button
+        variant="contained"
+        color="secondary"
+        className={classes.button}
+        startIcon={<DeleteIcon />}
+      >
         Delete
-        <DeleteIcon className={classes.rightIcon} />
       </Button>
-      <Button variant="contained" color="primary" className={classes.button}>
+      {/* This Button uses a Font Icon, see the installation instructions in the Icon component docs. */}
+      <Button
+        variant="contained"
+        color="primary"
+        className={classes.button}
+        endIcon={<Icon>send</Icon>}
+      >
         Send
-        {/* This Button uses a Font Icon, see the installation instructions in the docs. */}
-        <Icon className={classes.rightIcon}>send</Icon>
       </Button>
-      <Button variant="contained" color="default" className={classes.button}>
+      <Button
+        variant="contained"
+        color="default"
+        className={classes.button}
+        startIcon={<CloudUploadIcon />}
+      >
         Upload
-        <CloudUploadIcon className={classes.rightIcon} />
       </Button>
-      <Button variant="contained" disabled color="secondary" className={classes.button}>
-        <KeyboardVoiceIcon className={classes.leftIcon} />
+      <Button
+        variant="contained"
+        disabled
+        color="secondary"
+        className={classes.button}
+        startIcon={<KeyboardVoiceIcon />}
+      >
         Talk
       </Button>
-      <Button variant="contained" size="small" className={classes.button}>
-        <SaveIcon className={clsx(classes.leftIcon, classes.iconSmall)} />
+      <Button variant="contained" size="small" className={classes.button} startIcon={<SaveIcon />}>
+        Save
+      </Button>
+      <Button variant="contained" size="large" className={classes.button} startIcon={<SaveIcon />}>
         Save
       </Button>
     </div>

docs/src/pages/components/buttons/IconLabelButtons.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import clsx from 'clsx';
 import Button from '@material-ui/core/Button';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
 import DeleteIcon from '@material-ui/icons/Delete';
@@ -13,15 +12,6 @@ const useStyles = makeStyles((theme: Theme) =>
     button: {
       margin: theme.spacing(1),
     },
-    leftIcon: {
-      marginRight: theme.spacing(1),
-    },
-    rightIcon: {
-      marginLeft: theme.spacing(1),
-    },
-    iconSmall: {
-      fontSize: 20,
-    },
   }),
 );
 
@@ -30,25 +20,44 @@ export default function IconLabelButtons() {
 
   return (
     <div>
-      <Button variant="contained" color="secondary" className={classes.button}>
+      <Button
+        variant="contained"
+        color="secondary"
+        className={classes.button}
+        startIcon={<DeleteIcon />}
+      >
         Delete
-        <DeleteIcon className={classes.rightIcon} />
       </Button>
-      <Button variant="contained" color="primary" className={classes.button}>
+      {/* This Button uses a Font Icon, see the installation instructions in the Icon component docs. */}
+      <Button
+        variant="contained"
+        color="primary"
+        className={classes.button}
+        endIcon={<Icon>send</Icon>}
+      >
         Send
-        {/* This Button uses a Font Icon, see the installation instructions in the docs. */}
-        <Icon className={classes.rightIcon}>send</Icon>
       </Button>
-      <Button variant="contained" color="default" className={classes.button}>
+      <Button
+        variant="contained"
+        color="default"
+        className={classes.button}
+        startIcon={<CloudUploadIcon />}
+      >
         Upload
-        <CloudUploadIcon className={classes.rightIcon} />
       </Button>
-      <Button variant="contained" disabled color="secondary" className={classes.button}>
-        <KeyboardVoiceIcon className={classes.leftIcon} />
+      <Button
+        variant="contained"
+        disabled
+        color="secondary"
+        className={classes.button}
+        startIcon={<KeyboardVoiceIcon />}
+      >
         Talk
       </Button>
-      <Button variant="contained" size="small" className={classes.button}>
-        <SaveIcon className={clsx(classes.leftIcon, classes.iconSmall)} />
+      <Button variant="contained" size="small" className={classes.button} startIcon={<SaveIcon />}>
+        Save
+      </Button>
+      <Button variant="contained" size="large" className={classes.button} startIcon={<SaveIcon />}>
         Save
       </Button>
     </div>

packages/material-ui/src/Button/Button.d.ts

@@ -9,9 +9,11 @@ export type ButtonTypeMap<
   props: P & {
     color?: PropTypes.Color;
     disableFocusRipple?: boolean;
+    endIcon?: React.ReactNode;
     fullWidth?: boolean;
     href?: string;
     size?: 'small' | 'medium' | 'large';
+    startIcon?: React.ReactNode;
     variant?: 'text' | 'outlined' | 'contained';
   };
   defaultComponent: D;
@@ -48,6 +50,8 @@ export type ButtonClassKey =
   | 'containedSizeLarge'
   | 'sizeSmall'
   | 'sizeLarge'
-  | 'fullWidth';
+  | 'fullWidth'
+  | 'startIcon'
+  | 'endIcon';
 
 export default Button;