From adda15d0ee85bafb0c4785a169e7d7e9d4617d41 Mon Sep 17 00:00:00 2001
From: danranvm <danranvm@gmail.com>
Date: Tue, 26 Apr 2022 16:31:41 +0800
Subject: [PATCH] fix(comp: message): align icon with text

---
 packages/components/message/demo/Content.vue |  6 ++----
 packages/components/message/style/index.less | 11 +++++------
 2 files changed, 7 insertions(+), 10 deletions(-)

diff --git a/packages/components/message/demo/Content.vue b/packages/components/message/demo/Content.vue
index f9a7a721b..b844b9aa5 100644
--- a/packages/components/message/demo/Content.vue
+++ b/packages/components/message/demo/Content.vue
@@ -5,16 +5,14 @@
 <script lang="ts">
 import { defineComponent, h } from 'vue'
 
+import { IxIcon } from '@idux/components/icon'
 import { useMessage } from '@idux/components/message'
 
 export default defineComponent({
   setup() {
     const message = useMessage()
 
-    const content = h('ul', {}, [
-      h('li', {}, 'This is a VNode content data'),
-      h('li', {}, 'This is a VNode content data'),
-    ])
+    const content = h('span', {}, [h('span', {}, 'This is a VNode content '), h(IxIcon, { name: 'star' })])
 
     const open = () => message.info(content)
 
diff --git a/packages/components/message/style/index.less b/packages/components/message/style/index.less
index 195209a6c..767e7bfee 100644
--- a/packages/components/message/style/index.less
+++ b/packages/components/message/style/index.less
@@ -11,7 +11,7 @@
   line-height: @message-line-height;
 
   &-content {
-    display: inline-flex;
+    display: inline-block;
     min-width: @message-content-min-width;
     max-width: @message-content-max-width;
     padding: @message-content-padding-vertical @message-content-padding-horizontal;
@@ -20,12 +20,11 @@
     box-shadow: @message-content-box-shadow;
     pointer-events: all;
 
-    &-text {
-      display: inline-block;
-      text-align: left;
-    }
-
     &-icon {
+      display: inline-block;
+      position: relative;
+      top: 1px;
+      line-height: 0;
       margin-right: @message-icon-margin-right;
       font-size: @font-size-lg;
     }