[docs] Add demo for buttons with label and icon (mui#8922)

* Added demo for buttons with label and icon

* Fix ESLint issue

* Fix some ESLint error :
- missing flow annotation
- no-unused-var

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

@@ -0,0 +1,66 @@
+// @flow weak
+
+import React from 'react';
+import PropTypes from 'prop-types';
+import Button from 'material-ui/Button';
+import { withStyles } from 'material-ui/styles';
+import Delete from 'material-ui-icons/Delete';
+import Done from 'material-ui-icons/Done';
+import FileUpload from 'material-ui-icons/FileUpload';
+import KeyboardVoice from 'material-ui-icons/KeyboardVoice';
+import Save from 'material-ui-icons/Save';
+import Send from 'material-ui-icons/Send';
+
+const styles = theme => ({
+  button: {
+    margin: theme.spacing.unit,
+  },
+  leftIcon: {
+    marginRight: theme.spacing.unit,
+  },
+  rightIcon: {
+    marginLeft: theme.spacing.unit,
+  },
+});
+
+function IconLabelButtons(props) {
+  const { classes } = props;
+  return (
+    <div>
+      <div>
+        <Button className={classes.button} raised color="accent">
+          Delete
+          <Delete className={props.classes.rightIcon} />
+        </Button>
+        <Button className={classes.button} raised color="primary">
+          Send
+          <Send className={props.classes.rightIcon} />
+        </Button>
+        <Button className={classes.button} raised color="default">
+          Upload
+          <FileUpload className={props.classes.rightIcon} />
+        </Button>
+      </div>
+      <div>
+        <Button className={classes.button} raised color="contrast">
+          <Done className={props.classes.leftIcon} />
+          Done
+        </Button>
+        <Button className={classes.button} raised disabled color="accent">
+          <KeyboardVoice className={props.classes.leftIcon} />
+          Talk
+        </Button>
+        <Button className={classes.button} raised dense>
+          <Save className={props.classes.leftIcon} />
+          Save
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+IconLabelButtons.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(IconLabelButtons);

docs/src/pages/demos/buttons/buttons.md

@@ -43,6 +43,11 @@ Icons are also appropriate for toggle buttons that allow a single choice to be s
 
 {{demo='pages/demos/buttons/IconButtons.js'}}
 
+### Buttons with icons and label
+Sometimes you might want to have icons for certain button to enhance the UX of the application as humans recognize logos more than plain text. For example, if you have a delete button you can label it with a dustbin icon.
+
+{{demo='pages/demos/buttons/IconLabelButtons.js'}}
+
 ## Complex Buttons
 
 The Flat Buttons, Raised Buttons, Floating Action Buttons and Icon Buttons are built on top of the same component: the `ButtonBase`.

pages/demos/buttons.js

@@ -36,6 +36,13 @@ module.exports = require('fs')
           raw: preval`
 module.exports = require('fs')
   .readFileSync(require.resolve('docs/src/pages/demos/buttons/IconButtons'), 'utf8')
+`,
+        },
+        'pages/demos/buttons/IconLabelButtons.js': {
+          js: require('docs/src/pages/demos/buttons/IconLabelButtons').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/demos/buttons/IconLabelButtons'), 'utf8')
 `,
         },
         'pages/demos/buttons/ButtonBases.js': {