Enable Element to behave as Icon

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 = {

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,

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>
     );
   }