diff --git a/example/pages/icon/index.wxss b/example/pages/icon/index.wxss
index 17f7fcd9..3b3083d2 100644
--- a/example/pages/icon/index.wxss
+++ b/example/pages/icon/index.wxss
@@ -10,9 +10,8 @@ page {
 }
 
 .icon {
-  display: block;
   margin: 16px 0;
-  color: #323233;
+  color: #323233 !important;
 }
 
 .text {
diff --git a/packages/icon/computed.wxs b/packages/icon/computed.wxs
new file mode 100644
index 00000000..4fde5f08
--- /dev/null
+++ b/packages/icon/computed.wxs
@@ -0,0 +1,50 @@
+/* eslint-disable */
+var utils = require('../wxs/utils.wxs');
+
+function isImage(name) {
+  return name.indexOf('/') !== -1;
+}
+
+function rootClass(data) {
+  var classes = ['custom-class'];
+
+  if (data.classPrefix != null) {
+    classes.push(data.classPrefix);
+  }
+
+  if (isImage(data.name)) {
+    classes.push('van-icon--image');
+  } else if (data.classPrefix != null) {
+    classes.push(data.classPrefix + '-' + data.name);
+  }
+
+  return classes.join(' ');
+}
+
+function rootStyle(data) {
+  var styles = [];
+
+  if (data.color) {
+    styles.push(['color', data.color]);
+  }
+
+  if (data.size) {
+    styles.push(['font-size', utils.addUnit(data.size)]);
+  }
+
+  if (data.customStyle) {
+    styles.push([data.customStyle]);
+  }
+
+  return styles
+    .map(function (pair) {
+      return pair.join(':');
+    })
+    .join(';');
+}
+
+module.exports = {
+  isImage: isImage,
+  rootClass: rootClass,
+  rootStyle: rootStyle,
+};
diff --git a/packages/icon/index.ts b/packages/icon/index.ts
index fe9caf30..e4bb2d8b 100644
--- a/packages/icon/index.ts
+++ b/packages/icon/index.ts
@@ -11,14 +11,7 @@ VantComponent({
       type: String,
       value: 'van-icon',
     },
-    name: {
-      type: String,
-      observer(val) {
-        this.setData({
-          isImageName: val.indexOf('/') !== -1,
-        });
-      },
-    },
+    name: String,
   },
 
   methods: {
diff --git a/packages/icon/index.wxml b/packages/icon/index.wxml
index fe4065a4..62eff360 100644
--- a/packages/icon/index.wxml
+++ b/packages/icon/index.wxml
@@ -1,8 +1,9 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./computed.wxs" module="computed" />
 
 <view
-  class="custom-class {{ classPrefix }} {{ isImageName ? 'van-icon--image' : classPrefix + '-' + name }}"
-  style="color: {{ color }};font-size: {{ utils.addUnit(size) }};{{ customStyle }}"
+  class="{{ computed.rootClass({ classPrefix, name }) }}"
+  style="{{ computed.rootStyle({ customStyle, color, size }) }}"
   bind:tap="onClick"
 >
   <van-info
@@ -12,7 +13,7 @@
     custom-class="van-icon__info"
   />
   <image
-    wx:if="{{ isImageName }}"
+    wx:if="{{ computed.isImage(name) }}"
     src="{{ name }}"
     mode="aspectFit"
     class="van-icon__image"