From 52470a8dea964d0b192735c24dba788f10ff3458 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Tue, 30 Aug 2022 13:35:25 +0000
Subject: [PATCH] docs(button): fix icon usage

---
 docs/api/button.md | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

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>
 ```