From 1d725dc0624d76a6f69a1a54c284356e46ff3515 Mon Sep 17 00:00:00 2001
From: Bao Dang <dangvinhbao@gmail.com>
Date: Fri, 17 Jun 2016 07:55:19 +1000
Subject: [PATCH] #575: Use classname 'material-icons' if children is a string

---
 components/font_icon/FontIcon.js | 2 +-
 spec/components/font_icon.js     | 4 ++--
 spec/root.js                     | 2 ++
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/components/font_icon/FontIcon.js b/components/font_icon/FontIcon.js
index 8354ebb4..29fa06f2 100644
--- a/components/font_icon/FontIcon.js
+++ b/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}
diff --git a/spec/components/font_icon.js b/spec/components/font_icon.js
index ba115a79..49dc010e 100644
--- a/spec/components/font_icon.js
+++ b/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>
 );
 
diff --git a/spec/root.js b/spec/root.js
index a4121d85..ee5c3303 100644
--- a/spec/root.js
+++ b/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 />