[TextField] Add an icon example

docs/src/pages/demos/text-fields/InputWithIcon.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from 'material-ui/styles';
+import Input, { InputLabel, InputAdornment } from 'material-ui/Input';
+import { FormControl } from 'material-ui/Form';
+import TextField from 'material-ui/TextField';
+import Grid from 'material-ui/Grid';
+import AccountCircle from 'material-ui-icons/AccountCircle';
+
+const styles = theme => ({
+  margin: {
+    margin: theme.spacing.unit,
+  },
+});
+
+function InputWithIcon(props) {
+  const { classes } = props;
+
+  return (
+    <div>
+      <FormControl className={classes.margin}>
+        <InputLabel htmlFor="input-with-icon-adornment">With a start adornment</InputLabel>
+        <Input
+          id="input-with-icon-adornment"
+          startAdornment={
+            <InputAdornment position="start">
+              <AccountCircle />
+            </InputAdornment>
+          }
+        />
+      </FormControl>
+      <TextField
+        className={classes.margin}
+        id="input-with-icon-textfield"
+        label="TextField"
+        InputProps={{
+          startAdornment: (
+            <InputAdornment position="start">
+              <AccountCircle />
+            </InputAdornment>
+          ),
+        }}
+      />
+      <div className={classes.margin}>
+        <Grid container spacing={8} alignItems="flex-end">
+          <Grid item>
+            <AccountCircle />
+          </Grid>
+          <Grid item>
+            <TextField id="input-with-icon-grid" label="With a grid" />
+          </Grid>
+        </Grid>
+      </div>
+    </div>
+  );
+}
+
+InputWithIcon.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+export default withStyles(styles)(InputWithIcon);

docs/src/pages/demos/text-fields/text-fields.md

@@ -15,7 +15,7 @@ The `TextField` wrapper component is a complete form control including a label,
 
 ## Components
 
-`TextField` is composed of smaller components (`FormControl`, `InputLabel`, `Input`, and `FormHelperText`) that you can leverage directly to significantly customize your form inputs.
+`TextField` is composed of smaller components ([`FormControl`](/api/form-control), [`InputLabel`](/api/input-label), [`Input`](/api/input), and [`FormHelperText`](/api/form-helper-text)) that you can leverage directly to significantly customize your form inputs.
 
 You might also have noticed that some native HTML input properties are missing from the `TextField` component.
 This is on purpose.
@@ -58,3 +58,9 @@ Here is an example of how you can change the main color of an input from "primar
 There is no limit.
 
 {{"demo": "pages/demos/text-fields/CustomizedInputs.js"}}
+
+## With icon
+
+Icons can be specified as prepended or appended.
+
+{{"demo": "pages/demos/text-fields/InputWithIcon.js"}}

pages/demos/text-fields.js

@@ -55,6 +55,13 @@ module.exports = require('fs')
           raw: preval`
 module.exports = require('fs')
   .readFileSync(require.resolve('docs/src/pages/demos/text-fields/CustomizedInputs'), 'utf8')
+`,
+        },
+        'pages/demos/text-fields/InputWithIcon.js': {
+          js: require('docs/src/pages/demos/text-fields/InputWithIcon').default,
+          raw: preval`
+module.exports = require('fs')
+  .readFileSync(require.resolve('docs/src/pages/demos/text-fields/InputWithIcon'), 'utf8')
 `,
         },
       }}