From aef883944a5021153b22cbb916f717fd1ab01b6a Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sun, 26 May 2024 00:07:38 +0300
Subject: [PATCH] Update icons demo

---
 doc/button/IconsDoc.vue | 58 +++++++++++++++++++++++++----------------
 1 file changed, 35 insertions(+), 23 deletions(-)

diff --git a/doc/button/IconsDoc.vue b/doc/button/IconsDoc.vue
index 3869b121e..4c427d265 100644
--- a/doc/button/IconsDoc.vue
+++ b/doc/button/IconsDoc.vue
@@ -2,12 +2,16 @@
     <DocSectionText v-bind="$attrs">
         <p>Icon of a button is specified with <i>icon</i> property and position is configured using <i>iconPos</i> attribute.</p>
     </DocSectionText>
-    <div class="card flex flex-wrap gap-4 justify-center">
-        <Button icon="pi pi-check" class="self-center" aria-label="Submit" />
-        <Button label="Submit" icon="pi pi-check" class="self-center" />
-        <Button label="Submit" icon="pi pi-check" iconPos="right" class="self-center" />
-        <Button label="Submit" icon="pi pi-check" iconPos="top" />
-        <Button label="Submit" icon="pi pi-check" iconPos="bottom" />
+    <div class="card flex items-center gap-4 justify-center">
+        <div class="flex flex-wrap gap-4 justify-center">
+            <Button icon="pi pi-home" aria-label="Save" />
+            <Button label="Profile" icon="pi pi-user" />
+            <Button label="Save" icon="pi pi-check" iconPos="right" />
+        </div>
+        <div class="flex flex-wrap gap-4 justify-center">
+            <Button label="Search" icon="pi pi-search" iconPos="top" text />
+            <Button label="Update" icon="pi pi-refresh" iconPos="bottom" text />
+        </div>
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -18,20 +22,24 @@ export default {
         return {
             code: {
                 basic: `
-<Button icon="pi pi-check" aria-label="Submit" />
-<Button label="Submit" icon="pi pi-check" />
-<Button label="Submit" icon="pi pi-check" iconPos="right" />
-<Button label="Submit" icon="pi pi-check" iconPos="top" />
-<Button label="Submit" icon="pi pi-check" iconPos="bottom" />
+<Button icon="pi pi-home" aria-label="Save" />
+<Button label="Profile" icon="pi pi-user" />
+<Button label="Save" icon="pi pi-check" iconPos="right" />
+<Button label="Search" icon="pi pi-search" iconPos="top" text />
+<Button label="Update" icon="pi pi-refresh" iconPos="bottom" text />
 `,
                 options: `
 <template>
-    <div class="card flex flex-wrap gap-4 justify-center">
-        <Button icon="pi pi-check" aria-label="Submit" />
-        <Button label="Submit" icon="pi pi-check" />
-        <Button label="Submit" icon="pi pi-check" iconPos="right" />
-        <Button label="Submit" icon="pi pi-check" iconPos="top" />
-        <Button label="Submit" icon="pi pi-check" iconPos="bottom" />
+    <div class="card flex items-center gap-4 justify-center">
+        <div class="flex flex-wrap gap-4 justify-center">
+            <Button icon="pi pi-home" aria-label="Save" />
+            <Button label="Profile" icon="pi pi-user" />
+            <Button label="Save" icon="pi pi-check" iconPos="right" />
+        </div>
+        <div class="flex flex-wrap gap-4 justify-center">
+            <Button label="Search" icon="pi pi-search" iconPos="top" text />
+            <Button label="Update" icon="pi pi-refresh" iconPos="bottom" text />
+        </div>
     </div>
 </template>
 
@@ -40,12 +48,16 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex flex-wrap gap-4 justify-center">
-        <Button icon="pi pi-check" aria-label="Submit" />
-        <Button label="Submit" icon="pi pi-check" />
-        <Button label="Submit" icon="pi pi-check" iconPos="right" />
-        <Button label="Submit" icon="pi pi-check" iconPos="top" />
-        <Button label="Submit" icon="pi pi-check" iconPos="bottom" />
+    <div class="card flex items-center gap-4 justify-center">
+        <div class="flex flex-wrap gap-4 justify-center">
+            <Button icon="pi pi-home" aria-label="Save" />
+            <Button label="Profile" icon="pi pi-user" />
+            <Button label="Save" icon="pi pi-check" iconPos="right" />
+        </div>
+        <div class="flex flex-wrap gap-4 justify-center">
+            <Button label="Search" icon="pi pi-search" iconPos="top" text />
+            <Button label="Update" icon="pi pi-refresh" iconPos="bottom" text />
+        </div>
     </div>
 </template>