diff --git a/components/slider/demo/icon-slider.md b/components/slider/demo/icon-slider.md
index c8546ec95c..b8af4d59e3 100644
--- a/components/slider/demo/icon-slider.md
+++ b/components/slider/demo/icon-slider.md
@@ -8,6 +8,7 @@
 
 ````jsx
 var Slider = antd.Slider;
+var Icon = antd.Icon;
 
 var IconSlider = React.createClass({
   getInitialState() {
@@ -15,18 +16,9 @@ var IconSlider = React.createClass({
     var min = this.props.min;
     var mid = ((max - min) / 2).toFixed(5);
 
-    var preIcon, nextIcon;
-    if (this.props.value >= mid) {
-      preIcon = this.props.icon[0];
-      nextIcon = this.props.icon[1] + ' anticon-highlight';
-    } else {
-      preIcon = this.props.icon[0] + ' anticon-highlight';
-      nextIcon = this.props.icon[1];
-    }
-
     return {
-      preIcon: preIcon,
-      nextIcon: nextIcon,
+      preIconClass: this.props.value >= mid ? '' : 'anticon-highlight',
+      nextIconClass: this.props.value >= mid ? 'anticon-highlight' : '',
       mid: mid,
       sliderValue: this.props.value
     };
@@ -34,18 +26,11 @@ var IconSlider = React.createClass({
 
   handleChange(v) {
     var preIcon, nextIcon;
-    if (v >= this.state.mid) {
-      preIcon = this.props.icon[0];
-      nextIcon = this.props.icon[1] + ' anticon-highlight';
-    } else {
-      preIcon = this.props.icon[0] + ' anticon-highlight';
-      nextIcon = this.props.icon[1];
-    }
 
     this.setState(
       {
-        preIcon: preIcon,
-        nextIcon: nextIcon,
+        preIconClass: v >= this.state.mid ? '' : 'anticon-highlight',
+        nextIconClass: v >= this.state.mid ? 'anticon-highlight': '',
         sliderValue: v
       }
     );
@@ -54,8 +39,8 @@ var IconSlider = React.createClass({
   render() {
     return (
       <div className="iconWrapper">
-        <i className={this.state.preIcon}></i>
-        <i className={this.state.nextIcon}></i>
+        <Icon className={this.state.preIconClass} type={this.props.icon[0]} />
+        <Icon className={this.state.nextIconClass} type={this.props.icon[1]} />
         <Slider {...this.props} onChange={this.handleChange} value={this.state.sliderValue} />
       </div>
     );
@@ -63,7 +48,7 @@ var IconSlider = React.createClass({
 });
 
 React.render(
-<IconSlider min={0} max={20} value={0} icon={['anticon anticon-lock', 'anticon anticon-unlock']} />
+<IconSlider min={0} max={20} value={0} icon={['lock', 'unlock']} />
 , document.getElementById('components-slider-demo-icon-slider'));
 ````