diff --git a/packages/components/dropdown/demo/Basic.vue b/packages/components/dropdown/demo/Basic.vue
index 1dfd37dfd..360f27b70 100644
--- a/packages/components/dropdown/demo/Basic.vue
+++ b/packages/components/dropdown/demo/Basic.vue
@@ -1,7 +1,8 @@
 <template>
   <IxDropdown v-model:visible="visible">
-    <a class="ix-dropdown-trigger"
-      >Hover me <IxIcon name="down" :style="{ fontSize: '16px' }" :rotate="visible ? -180 : 0"></IxIcon
+    <a class="ix-dropdown-trigger flex-center">
+      Hover me
+      <IxIcon name="down" :style="{ fontSize: '16px' }" :rotate="visible ? -180 : 0"></IxIcon
     ></a>
     <template #overlay>
       <IxMenu :dataSource="dataSource" :selectable="false" @click="onClick"></IxMenu>
@@ -33,3 +34,10 @@ const onClick = ({ key }: MenuClickOptions) => {
   }
 }
 </script>
+
+<style scoped>
+.flex-center {
+  display: flex;
+  align-items: center;
+}
+</style>
diff --git a/packages/components/dropdown/demo/Button.vue b/packages/components/dropdown/demo/Button.vue
index 586ea0428..08bb058e7 100644
--- a/packages/components/dropdown/demo/Button.vue
+++ b/packages/components/dropdown/demo/Button.vue
@@ -13,7 +13,7 @@
       <IxButton @click="onClick">Button</IxButton>
       <IxDropdown v-model:visible="settingDropdownVisible">
         <IxButton shape="square">
-          <IxIcon name="setting" :rotate="settingDropdownVisible ? -180 : 0" size="16px" />
+          <IxIcon name="setting" class="flex-center" :rotate="settingDropdownVisible ? -180 : 0" size="16px" />
         </IxButton>
         <template #overlay>
           <IxMenu :dataSource="dataSource" :selectable="false"></IxMenu>
@@ -23,8 +23,10 @@
 
     <IxDropdown v-model:visible="arrowDropdownVisible">
       <IxButton>
-        Button
-        <IxIcon name="down" :rotate="arrowDropdownVisible ? -180 : 0" size="16px" style="margin-left: 4px"></IxIcon>
+        <div class="flex-center">
+          Button
+          <IxIcon name="down" :rotate="arrowDropdownVisible ? -180 : 0" size="16px" style="margin-left: 4px"></IxIcon>
+        </div>
       </IxButton>
       <template #overlay>
         <IxMenu :dataSource="dataSource" :selectable="false"></IxMenu>
@@ -50,3 +52,10 @@ const dataSource: MenuData[] = [
 
 const onClick = () => console.log('button click')
 </script>
+
+<style scoped>
+.flex-center {
+  display: flex;
+  align-items: center;
+}
+</style>