Update Docs for SVG and Font Icons

docs/src/app/app-routes.jsx

@@ -29,8 +29,8 @@ import DatePicker from './components/pages/components/DatePicker/Page';
 import DialogPage from './components/pages/components/Dialog/Page';
 import DividerPage from './components/pages/components/Divider/Page';
 import DropDownMenuPage from './components/pages/components/DropDownMenu/Page';
+import FontIconPage from './components/pages/components/FontIcon/Page';
 import GridListPage from './components/pages/components/GridList/Page';
-import Icons from './components/pages/components/icons';
 import IconButtonPage from './components/pages/components/IconButton/Page';
 import IconMenus from './components/pages/components/icon-menus';
 import LeftNavPage from './components/pages/components/LeftNav/Page';
@@ -43,6 +43,7 @@ import RefreshIndicator from './components/pages/components/refresh-indicator';
 import SelectField from './components/pages/components/SelectField/Page';
 import Sliders from './components/pages/components/sliders';
 import SnackbarPage from './components/pages/components/Snackbar/Page';
+import SvgIconPage from './components/pages/components/SvgIcon/Page';
 import Switches from './components/pages/components/switches';
 import Table from './components/pages/components/table';
 import TabsPage from './components/pages/components/Tabs/Page';
@@ -90,8 +91,8 @@ const AppRoutes = (
       <Route path="dialog" component={DialogPage} />
       <Route path="divider" component={DividerPage} />
       <Route path="dropdown-menu" component={DropDownMenuPage} />
+      <Route path="font-icon" component={FontIconPage} />
       <Route path="grid-list" component={GridListPage} />
-      <Route path="icons" component={Icons} />
       <Route path="icon-button" component={IconButtonPage} />
       <Route path="icon-menus" component={IconMenus} />
       <Route path="left-nav" component={LeftNavPage} />
@@ -103,6 +104,7 @@ const AppRoutes = (
       <Route path="refresh-indicator" component={RefreshIndicator} />
       <Route path="select-field" component={SelectField} />
       <Route path="sliders" component={Sliders} />
+      <Route path="svg-icon" component={SvgIconPage} />
       <Route path="switches" component={Switches} />
       <Route path="snackbar" component={SnackbarPage} />
       <Route path="table" component={Table} />

docs/src/app/components/app-left-nav.jsx

@@ -183,10 +183,6 @@ const AppLeftNav = React.createClass({
                 value="/components/grid-list"
                 primaryText="Grid List"
               />,
-              <ListItem
-                value="/components/icons"
-                primaryText="Icons"
-              />,
               <ListItem
                 value="/components/icon-button"
                 primaryText="Icon Button"
@@ -195,6 +191,20 @@ const AppLeftNav = React.createClass({
                 value="/components/icon-menus"
                 primaryText="Icon Menus"
               />,
+              <ListItem
+                primaryText="Icons"
+                primaryTogglesNestedList={true}
+                nestedItems={[
+                  <ListItem
+                    value="/components/font-icon"
+                    primaryText="Font Icon"
+                  />,
+                  <ListItem
+                    value="/components/svg-icon"
+                    primaryText="SVG Icon"
+                  />,
+                ]}
+              />,
               <ListItem
                 value="/components/left-nav"
                 primaryText="Left Nav"

docs/src/app/components/pages/components/FontIcon/ExampleIcons.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import FontIcon from 'material-ui/lib/font-icon';
+import Colors from 'material-ui/lib/styles/colors';
+
+const iconStyles = {
+  marginRight: 24,
+};
+
+const FontIconExampleIcons = () => (
+  <div>
+    <FontIcon className="material-icons" style={iconStyles} >home</FontIcon>
+    <FontIcon className="material-icons" style={iconStyles} color={Colors.red500}>flight_takeoff</FontIcon>
+    <FontIcon className="material-icons" style={iconStyles} color={Colors.yellow500}>cloud_download</FontIcon>
+    <FontIcon className="material-icons" style={iconStyles} color={Colors.blue500}>videogame_asset</FontIcon>
+  </div>
+);
+
+export default FontIconExampleIcons;

docs/src/app/components/pages/components/FontIcon/ExampleSimple.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import FontIcon from 'material-ui/lib/font-icon';
+import Colors from 'material-ui/lib/styles/colors';
+
+const iconStyles = {
+  marginRight: 24,
+};
+
+const FontIconExampleSimple = () => (
+  <div>
+    <FontIcon
+      className="muidocs-icon-action-home"
+      style={iconStyles} />
+    <FontIcon
+      className="muidocs-icon-action-home"
+      style={iconStyles}
+      color={Colors.blue500} />
+    <FontIcon
+      className="muidocs-icon-action-home"
+      style={iconStyles}
+      color={Colors.red500}
+      hoverColor={Colors.greenA200} />
+  </div>
+);
+
+export default FontIconExampleSimple;

docs/src/app/components/pages/components/FontIcon/Page.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import CodeExample from '../../../CodeExample';
+import PropTypeDescription from '../../../PropTypeDescription';
+import MarkdownElement from '../../../MarkdownElement';
+
+import iconCode from '!raw!material-ui/lib/font-icon';
+import iconReadmeText from './README';
+import IconExampleSimple from './ExampleSimple';
+import iconExampleSimpleCode from '!raw!./ExampleSimple';
+import IconExampleIcons from './ExampleIcons';
+import iconExampleIconsCode from '!raw!./ExampleIcons';
+
+const FontIconPage = () => (
+  <div>
+    <MarkdownElement text={iconReadmeText} />
+    <CodeExample code={iconExampleSimpleCode}>
+      <IconExampleSimple />
+    </CodeExample>
+    <CodeExample code={iconExampleIconsCode}>
+      <IconExampleIcons />
+    </CodeExample>
+    <PropTypeDescription code={iconCode} />
+  </div>
+);
+
+export default FontIconPage;

docs/src/app/components/pages/components/FontIcon/README.md

@@ -0,0 +1,16 @@
+## Font Icon
+This component will render any [icon](https://www.google.com/design/spec/style/icons.html#) defined in any style sheets included in your project.
+We are using [Google's Material Design Icons](https://github.com/google/material-design-icons) for our documentation site along with some custom icons.
+You can use sites like IcoMoon for generating custom font files.
+To use FontIcon, add your stylesheet to your project and reference the icon's className in the className prop.
+
+We also support [Google's Material Icons](http://google.github.io/material-design-icons/) as seen in the third block of code.
+If you're using the material icons, be sure to include the link to the font icon file in your head section:
+```html
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+```
+
+To see available Material Icons, go to [material icons library](https://design.google.com/icons/).
+Google's material icon's names are in snake_case format. For example: ActionHome would be written as action_home.
+
+### Examples

docs/src/app/components/pages/components/SVGIcon/ExampleIcons.jsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import ActionHome from 'material-ui/lib/svg-icons/action/home';
+import ActionFlightTakeoff from 'material-ui/lib/svg-icons/action/flight-takeoff';
+import FileCloudDownload from 'material-ui/lib/svg-icons/file/cloud-download';
+import HardwareVideogameAsset from 'material-ui/lib/svg-icons/hardware/videogame-asset';
+import Colors from 'material-ui/lib/styles/colors';
+
+
+const iconStyles = {
+  marginRight: 24,
+};
+
+const SvgIconExampleIcons = () => (
+  <div>
+    <ActionHome style={iconStyles}/>
+    <ActionFlightTakeoff style={iconStyles} color={Colors.red500} />
+    <FileCloudDownload style={iconStyles} color={Colors.yellow500} />
+    <HardwareVideogameAsset style={iconStyles} color={Colors.blue500} />
+  </div>
+);
+
+export default SvgIconExampleIcons;

docs/src/app/components/pages/components/SVGIcon/ExampleSimple.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import ActionHome from 'material-ui/lib/svg-icons/action/home';
+import Colors from 'material-ui/lib/styles/colors';
+
+
+const iconStyles = {
+  marginRight: 24,
+};
+
+const SvgIconExampleSimple = () => (
+  <div>
+    <ActionHome style={iconStyles} />
+    <ActionHome style={iconStyles} color={Colors.blue500} />
+    <ActionHome style={iconStyles} color={Colors.red500} hoverColor={Colors.greenA200} />
+  </div>
+);
+
+export default SvgIconExampleSimple;

docs/src/app/components/pages/components/SVGIcon/Page.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import CodeExample from '../../../CodeExample';
+import PropTypeDescription from '../../../PropTypeDescription';
+import MarkdownElement from '../../../MarkdownElement';
+
+import iconCode from '!raw!material-ui/lib/svg-icon';
+import iconReadmeText from './README';
+import IconExampleSimple from './ExampleSimple';
+import iconExampleSimpleCode from '!raw!./ExampleSimple';
+import IconExampleIcons from './ExampleIcons';
+import iconExampleIconsCode from '!raw!./ExampleIcons';
+
+const SvgIconPage = () => (
+  <div>
+    <MarkdownElement text={iconReadmeText} />
+    <CodeExample code={iconExampleSimpleCode}>
+      <IconExampleSimple />
+    </CodeExample>
+    <CodeExample code={iconExampleIconsCode}>
+      <IconExampleIcons />
+    </CodeExample>
+    <PropTypeDescription code={iconCode} />
+  </div>
+);
+
+export default SvgIconPage;

docs/src/app/components/pages/components/SVGIcon/README.md

@@ -0,0 +1,5 @@
+## SVG Icons
+Using material-ui's SVG Icon, we can create a custom [svg component](https://www.google.com/design/spec/style/icons.html#icons-system-icons). In our examples, we are creating the ActionHome SvgIcon for this docs site, and using it in some separate component.
+Custom SvgIcon components can be included as children for other Material UI components that use icons such as [IconButtons](http://www.material-ui.com/#/components/icon-button).
+
+### Examples