diff --git a/docs/api/button.md b/docs/api/button.md
index 2831df0f112..17834e8ba83 100644
--- a/docs/api/button.md
+++ b/docs/api/button.md
@@ -358,17 +358,17 @@ export class ButtonExample {
 
   <!-- Icons -->
   <ion-button>
-    <ion-icon slot="start" name="star"></ion-icon>
+    <ion-icon slot="start" :icon="star"></ion-icon>
     Left Icon
   </ion-button>
 
   <ion-button>
     Right Icon
-    <ion-icon slot="end" name="star"></ion-icon>
+    <ion-icon slot="end" :icon="star"></ion-icon>
   </ion-button>
 
   <ion-button>
-    <ion-icon slot="icon-only" name="star"></ion-icon>
+    <ion-icon slot="icon-only" :icon="star"></ion-icon>
   </ion-button>
 
   <!-- Sizes -->
@@ -378,11 +378,15 @@ export class ButtonExample {
 </template>
 
 <script>
-import { IonButton } from '@ionic/vue';
+import { IonButton, IonIcon } from '@ionic/vue';
 import { defineComponent } from 'vue';
+import { star } from 'ionicons/icons';
 
 export default defineComponent({
-  components: { IonButton }
+  components: { IonButton, IonIcon },
+  setup() {
+    return { star }
+  }
 });
 </script>
 ```