Add docs for the font icon

components/font_icon/readme.md

@@ -1,13 +1,23 @@
-# FontIcon
+# Font Icon
 
-```
-var FontIcon  = require('react-toolbox/components/font_icon');
+The font icon component is used to represent an icon from the [Google Material Design](https://www.google.com/design/icons/) icon font. React Toolbox automatically includes the font for you so you just need to specify the name of the icon. Every name corresponds with the original one but separated with dashes. The font icon is displayed with the current color so it can be inherited from the parent component.
 
-<FontIcon value='add' />
+<!-- example -->
+```jsx
+import FontIcon from 'react-toolbox/font_icon;
+
+const FontIcons = () => (
+  <span>
+    <FontIcon value='add' />
+    <FontIcon value='favorite' />
+    <FontIcon value='star' />
+  </span>
+);
 ```
 
 ## Properties
 
 | Name              | Type          | Default         | Description|
-|:-                 |:-:            | :-              |:-|
-| **value**         | String        |                 | The keyString for the icon you want be displayed.|
+|:-----|:-----|:-----|:-----|
+| `className`     | `String`        |                 | The class name to give custom styles such as sizing.|
+| `value`         | `String`        |                 | The key string for the icon you want be displayed.|

docs/app/components/layout/main/modules/components.js

@@ -32,6 +32,7 @@ import DatePickerExample1 from './examples/datepicker_example_1.txt';
 import DialogExample1 from './examples/dialog_example_1.txt';
 import DrawerExample1 from './examples/drawer_example_1.txt';
 import DrodpownExample1 from './examples/dropdown_example_1.txt';
+import FontIconExample1 from './examples/font_icon_example_1.txt';
 import TimePickerTest from './examples/timepicker_example_1.txt';
 
 export default {
@@ -91,7 +92,8 @@ export default {
   font_icon: {
     name: 'Font Icon',
     docs: FontIcon,
-    path: '/components/font_icon'
+    path: '/components/font_icon',
+    examples: [FontIconExample1]
   },
   form: {
     name: 'Form',

docs/app/components/layout/main/modules/examples/font_icon_example_1.txt

@@ -0,0 +1,9 @@
+const FontIcons = () => (
+  <span>
+    <FontIcon value='add' />
+    <FontIcon value='favorite' />
+    <FontIcon value='star' />
+  </span>
+);
+
+return <FontIcons />;