From 998b5a44b73026f10eac62439f8156734eaf96c4 Mon Sep 17 00:00:00 2001
From: Juan Peri <eternoperegrino@gmail.com>
Date: Tue, 19 Jan 2016 23:14:17 +0100
Subject: [PATCH] Enable Element to behave as Icon

---
 components/font_icon/FontIcon.jsx | 7 +++++--
 components/input/Input.jsx        | 2 +-
 spec/components/input.jsx         | 4 +++-
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/components/font_icon/FontIcon.jsx b/components/font_icon/FontIcon.jsx
index 8adc581a..84d3d03f 100644
--- a/components/font_icon/FontIcon.jsx
+++ b/components/font_icon/FontIcon.jsx
@@ -2,7 +2,10 @@ import React from 'react';
 import ClassNames from 'classnames';
 
 const FontIcon = ({ children, className, value, ...other}) => {
-  const classes = ClassNames('material-icons', className);
+  const classes = ClassNames(
+    {'material-icons': !React.isValidElement(value)},
+    className
+  );
   return (
     <span className={classes} {...other} >
       {value}
@@ -14,7 +17,7 @@ const FontIcon = ({ children, className, value, ...other}) => {
 FontIcon.propTypes = {
   children: React.PropTypes.any,
   className: React.PropTypes.string,
-  value: React.PropTypes.string
+  value: React.PropTypes.any
 };
 
 FontIcon.defaultProps = {
diff --git a/components/input/Input.jsx b/components/input/Input.jsx
index bf2e11d3..4e747ec0 100644
--- a/components/input/Input.jsx
+++ b/components/input/Input.jsx
@@ -10,7 +10,7 @@ class Input extends React.Component {
     disabled: React.PropTypes.bool,
     error: React.PropTypes.string,
     floating: React.PropTypes.bool,
-    icon: React.PropTypes.string,
+    icon: React.PropTypes.any,
     label: React.PropTypes.string,
     maxLength: React.PropTypes.number,
     multiline: React.PropTypes.bool,
diff --git a/spec/components/input.jsx b/spec/components/input.jsx
index 22f83aef..38a84529 100644
--- a/spec/components/input.jsx
+++ b/spec/components/input.jsx
@@ -5,7 +5,8 @@ class InputTest extends React.Component {
   state = {
     normal: 'Tony Stark',
     fixedLabel: '',
-    withIcon: ''
+    withIcon: '',
+    withCustomIcon: ''
   };
 
   handleChange = (name, value) => {
@@ -27,6 +28,7 @@ class InputTest extends React.Component {
         <Input type='text' value='Read only' readOnly label='Phone Number' />
         <Input type='text' label='Disabled field' disabled />
         <Input type='tel' value={this.state.withIcon} label='With icon' onChange={this.handleChange.bind(this, 'withIcon')} icon='phone' />
+        <Input type='tel' value={this.state.withCustomIcon} label='With custom icon' onChange={this.handleChange.bind(this, 'withCustomIcon')} icon={<span>A</span>} />
       </section>
     );
   }