diff --git a/demo/index.js b/demo/index.js
index 476d1c9..1d27c51 100644
--- a/demo/index.js
+++ b/demo/index.js
@@ -20,18 +20,18 @@ var effect = 'zoomin',
 function renderMenu(){
   var component = (
     <Menu effect={effect} method={method} position={pos}>
-      <MainButton iconResting="ion-plus-round" iconActive="ion-close-round" />
+      <MainButton iconRestingClass="ion-plus-round" iconActiveClass="ion-close-round" />
       <ChildButton
         //onClick={function(e){ console.log(e); e.preventDefault(); }}
-        icon="ion-social-github"
+        iconClass="ion-social-github"
         label="View on Github"
         href="https://github.com/nobitagit/react-material-floating-button/" />
       <ChildButton
-        icon="ion-social-octocat"
+        iconClass="ion-social-octocat"
         label="Follow me on Github"
         href="https://github.com/nobitagit" />
       <ChildButton
-        icon="ion-social-twitter"
+        iconClass="ion-social-twitter"
         label="Share on Twitter"
         href="http://twitter.com/share?text=Amazing Google Inbox style material floating menu as a React component!&url=http://nobitagit.github.io/react-material-floating-button/&hashtags=material,menu,reactjs,react,component" />
     </Menu>
diff --git a/src/child-button.js b/src/child-button.js
index 5880868..2bbf32f 100644
--- a/src/child-button.js
+++ b/src/child-button.js
@@ -15,7 +15,7 @@ var ChildButton = React.createClass({
   },
 
   render: function(){
-    var iconClass = classnames('mfb-component__child-icon', this.props.icon);
+    var iconClass = classnames('mfb-component__child-icon', this.props.iconClass);
     var className = classnames('mfb-component__button--child',
                                this.props.className,
                                {"mfb-component__button--disabled": this.props.disabled});
@@ -25,7 +25,7 @@ var ChildButton = React.createClass({
            data-mfb-label={this.props.label}
            onClick={this.handleOnClick}
            className={className}>
-          <i className={iconClass}></i>
+          <i className={iconClass}>{this.props.icon}</i>
         </a>
       </li>
     );
diff --git a/src/main-button.js b/src/main-button.js
index ec246ff..aae8cce 100644
--- a/src/main-button.js
+++ b/src/main-button.js
@@ -10,25 +10,27 @@ var MainButton = React.createClass({
       onClick: function(){},
       iconResting: '',
       iconActive: '',
-      label: null
+      label: null,
+      iconRestingClass: '',
+      iconActiveClass: ''
     };
   },
   render: function(){
-    var iconResting = classnames('mfb-component__main-icon--resting', this.props.iconResting);
-    var iconActive = classnames('mfb-component__main-icon--active', this.props.iconActive);
+    var iconRestingClass = classnames('mfb-component__main-icon--resting', this.props.iconRestingClass);
+    var iconActiveClass = classnames('mfb-component__main-icon--active', this.props.iconActiveClass);
     var mainClass = classnames('mfb-component__button--main', this.props.className);
     if(this.props.label){
       return (
         <a href={this.props.href} className={mainClass} onClick={this.props.onClick} data-mfb-label={this.props.label}>
-          <i className={iconResting}></i>
-          <i className={iconActive}></i>
+          <i className={iconRestingClass}>{this.props.iconResting}</i>
+          <i className={iconActiveClass}>{this.props.iconActive}</i>
         </a>
       );
     } else {
       return (
         <a href={this.props.href} className={mainClass} onClick={this.props.onClick}>
-          <i className={iconResting}></i>
-          <i className={iconActive}></i>
+          <i className={iconRestingClass}>{this.props.iconResting}</i>
+          <i className={iconActiveClass}>{this.props.iconActive}</i>
         </a>
       );
     }