MessageBox: fix icon position error (#17410)

packages/message-box/src/main.vue

@@ -28,15 +28,17 @@
           </button>
         </div>
         <div class="el-message-box__content">
-          <div
-            :class="['el-message-box__status', icon]"
-            v-if="icon && !center && message !== ''">
-          </div>
-          <div class="el-message-box__message" v-if="message !== ''">
-            <slot>
-              <p v-if="!dangerouslyUseHTMLString">{{ message }}</p>
-              <p v-else v-html="message"></p>
-            </slot>
+          <div class="el-message-box__container">
+            <div
+              :class="['el-message-box__status', icon]"
+              v-if="icon && !center && message !== ''">
+            </div>
+            <div class="el-message-box__message" v-if="message !== ''">
+              <slot>
+                <p v-if="!dangerouslyUseHTMLString">{{ message }}</p>
+                <p v-else v-html="message"></p>
+              </slot>
+            </div>
           </div>
           <div class="el-message-box__input" v-show="showInput">
             <el-input

packages/theme-chalk/src/message-box.scss

@@ -73,11 +73,14 @@
   }
 
   @include e(content) {
-    position: relative;
     padding: 10px $--msgbox-padding-primary;
     color: $--messagebox-content-color;
     font-size: $--messagebox-content-font-size;
   }
+  
+  @include e(container) {
+    position: relative;
+  }
 
   @include e(input) {
     padding-top: 15px;