diff --git a/src/icon/demo/index.vue b/src/icon/demo/index.vue
index 5afc03bf5..9a7461597 100644
--- a/src/icon/demo/index.vue
+++ b/src/icon/demo/index.vue
@@ -199,7 +199,8 @@ export default {
 
     span {
       display: block;
-      margin: -4px 0 16px;
+      height: 36px;
+      margin: -4px 0 4px;
       padding: 0 5px;
       color: @gray-7;
       font-size: 12px;
diff --git a/src/icon/index.tsx b/src/icon/index.tsx
index 833a20bf9..826e6744b 100644
--- a/src/icon/index.tsx
+++ b/src/icon/index.tsx
@@ -27,8 +27,13 @@ function isImage(name?: string): boolean {
 }
 
 // compatible with legacy usage, should be removed in next major version
+const LEGACY_MAP: Record<string, string> = {
+  medel: 'medal',
+  'medel-o': 'medal-o'
+};
+
 function correctName(name?: string) {
-  return name === 'medel' ? 'medal' : name;
+  return (name && LEGACY_MAP[name]) || name;
 }
 
 function Icon(