#575: Use classname 'material-icons' if children is a string

components/font_icon/FontIcon.js

@@ -4,7 +4,7 @@ import classnames from 'classnames';
 const FontIcon = ({ children, className, value, ...other}) => (
   <span
     data-react-toolbox='font-icon'
-    className={classnames({'material-icons': typeof value === 'string'}, className)}
+    className={classnames({'material-icons': typeof value === 'string' || typeof children === 'string'}, className)}
     {...other}
   >
     {value}

spec/components/font_icon.js

@@ -3,14 +3,14 @@ import FontIcon from '../../components/font_icon';
 
 const FontIconTest = () => (
   <section>
-    <h2>Font Icon</h2>
+    <h5>Font Icons</h5>
     <p>lorem ipsum...</p>
 
     <FontIcon value="add"/>
     <FontIcon value="access_alarm"/>
     <FontIcon value="explore"/>
     <FontIcon value="zoom_in"/>
-    <FontIcon value="input"/>
+    <FontIcon>input</FontIcon>
   </section>
 );
 

spec/root.js

@@ -4,6 +4,7 @@ import React from 'react';
 import AppBar from '../components/app_bar';
 import Autocomplete from './components/autocomplete';
 import Avatar from './components/avatar';
+import FontIcon from './components/font_icon';
 import Button from './components/button';
 import ButtonToolbox from '../components/button';
 import Card from './components/card';
@@ -42,6 +43,7 @@ const Root = () => (
     </AppBar>
     <Autocomplete />
     <Avatar />
+    <FontIcon />
     <Button />
     <Card />
     <Checkbox />