Update Documentation for Font and SVG Icons

docs/src/app/app-routes.jsx

@@ -43,7 +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 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';
@@ -104,7 +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="svg-icon" component={SvgIconPage} />
       <Route path="switches" component={Switches} />
       <Route path="snackbar" component={SnackbarPage} />
       <Route path="table" component={Table} />

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

@@ -8,10 +8,12 @@ const iconStyles = {
 
 const FontIconExampleHover = () => (
   <div>
-    <FontIcon className="muidocs-icon-action-home" style={iconStyles}
-      color={Colors.yellow500} hoverColor={Colors.greenA200} />
-    <FontIcon className="muidocs-icon-action-home" style={iconStyles}
-      color={Colors.blue500} hoverColor={Colors.greenA200} />
+    <FontIcon className="muidocs-icon-action-home" style={iconStyles} />
+    <FontIcon
+      className="muidocs-icon-action-home"
+      style={iconStyles}
+      color={Colors.blue500}
+      hoverColor={Colors.greenA200} />
   </div>
 );
 

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

@@ -1,13 +1,16 @@
 ## Font Icons
 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 FontIcons, add your stylesheet to your project and reference the icon's className in the "className" prop.
+You can use sites like IcoMoon for generating custom font files.
+To use FontIcons, 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:
+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/). The names are in snake_case format, for example: find_in_page
+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/ExampleHover.jsx

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

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

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

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

@@ -7,15 +7,20 @@ import iconCode from '!raw!material-ui/lib/svg-icon';
 import iconReadmeText from './README';
 import IconExampleSimple from './ExampleSimple';
 import iconExampleSimpleCode from '!raw!./ExampleSimple';
+import IconExampleHover from './ExampleHover';
+import iconExampleHoverCode from '!raw!./ExampleHover';
 
-const SVGIconPage = () => (
+const SvgIconPage = () => (
   <div>
     <MarkdownElement text={iconReadmeText} />
     <CodeExample code={iconExampleSimpleCode}>
       <IconExampleSimple />
     </CodeExample>
+    <CodeExample code={iconExampleHoverCode}>
+      <IconExampleHover />
+    </CodeExample>
     <PropTypeDescription code={iconCode} />
   </div>
 );
 
-export default SVGIconPage;
+export default SvgIconPage;

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

@@ -1,15 +1,5 @@
 ## SVG Icons
-Using mui.SvgIcon, we can create a custom [svg component](https://www.google.com/design/spec/style/icons.html#). Here we are creating the ActionHome SvgIcon for this docs site, and using it in some separate component.
+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-buttons).
 
-For all of the Google's Material Design Icons prebuilt SvgIcon components exist. They can be used this way:
-```javascript
-import SocialNotificationsActive from 'material-ui/lib/svg-icons/social/notifications-active';
-...
-  render: function() {
-    return (
-      <SocialNotificationsActive />
-    );
-  }
-```
 ### Examples