diff --git a/examples/routers/input.vue b/examples/routers/input.vue
index 34cb49cb..36347742 100644
--- a/examples/routers/input.vue
+++ b/examples/routers/input.vue
@@ -1,7 +1,12 @@
 <template>
     <div style="width: 300px;">
+        <i-input v-model="value11">
+        </i-input>
         <i-input v-model="value11" icon="ios-clock-outline">
-            <span slot="prepend">http://</span>
+            <span slot="prepend">.com</span>
+        </i-input>
+        <i-input v-model="value11" icon="ios-clock-outline">
+            <span slot="append">.com</span>
         </i-input>
     </div>
 </template>
diff --git a/src/components/input/input.vue b/src/components/input/input.vue
index ee5fdeb0..d9837828 100644
--- a/src/components/input/input.vue
+++ b/src/components/input/input.vue
@@ -118,7 +118,8 @@
                         [`${prefixCls}-wrapper-${this.size}`]: !!this.size,
                         [`${prefixCls}-type`]: this.type,
                         [`${prefixCls}-group`]: this.prepend || this.append,
-                        [`${prefixCls}-group-${this.size}`]: (this.prepend || this.append) && !!this.size
+                        [`${prefixCls}-group-${this.size}`]: (this.prepend || this.append) && !!this.size,
+                        [`${prefixCls}-hide-icon`]: this.append  // #554
                     }
                 ];
             },
diff --git a/src/styles/components/input.less b/src/styles/components/input.less
index d56b12ea..81d61f35 100644
--- a/src/styles/components/input.less
+++ b/src/styles/components/input.less
@@ -19,6 +19,9 @@
         right: 0;
         z-index: 3;
     }
+    &-hide-icon &-icon{
+        display: none;
+    }
     &-icon-validate{
         display: none;
     }
@@ -26,6 +29,10 @@
     &-icon-normal + &{
         padding-right: 32px;
     }
+    // #554
+    &-hide-icon &-icon-normal + &{
+        padding-right: @input-padding-horizontal;
+    }
 
     &-wrapper-large &-icon{
         font-size: 18px;