From 6cb3b1ade8f6fb9f56fb005ffe8cc10b6c91ac96 Mon Sep 17 00:00:00 2001
From: shayan ghazali <shayan97.tti@gmail.com>
Date: Thu, 28 Sep 2023 08:33:26 +0330
Subject: [PATCH 1/2] a missed break; modified

---
 src/app/components/menu/menu.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/components/menu/menu.ts b/src/app/components/menu/menu.ts
index ab560619125..67c76024162 100755
--- a/src/app/components/menu/menu.ts
+++ b/src/app/components/menu/menu.ts
@@ -537,6 +537,7 @@ export class Menu implements OnDestroy {
                     DomHandler.focus(this.target);
                     this.hide();
                 }
+                break;
 
             case 'Tab':
                 this.overlayVisible && this.hide();

From be9aafd8d3116c6e6742f8ec63e78a9645b15553 Mon Sep 17 00:00:00 2001
From: gucal <gucalaliriza@outlook.com>
Date: Wed, 11 Oct 2023 15:24:46 +0300
Subject: [PATCH 2/2] Update button demos

---
 src/app/showcase/doc/button/badgedoc.ts     |   6 +-
 src/app/showcase/doc/button/iconsonlydoc.ts | 204 ++++++++++----------
 2 files changed, 105 insertions(+), 105 deletions(-)

diff --git a/src/app/showcase/doc/button/badgedoc.ts b/src/app/showcase/doc/button/badgedoc.ts
index 09598c8b00e..f33e9d1f2cc 100644
--- a/src/app/showcase/doc/button/badgedoc.ts
+++ b/src/app/showcase/doc/button/badgedoc.ts
@@ -9,7 +9,7 @@ import { Code } from '../../domain/code';
         </app-docsectiontext>
         <div class="card flex justify-content-center">
             <p-button label="Emails" badge="8"></p-button>
-            <p-button label="Messages" icon="pi pi-users" styleClass="p-button-warning" badge="8" badgeClass="p-badge-danger"></p-button>
+            <p-button label="Messages" icon="pi pi-users" severity="warning" badge="8" badgeClass="p-badge-danger"></p-button>
         </div>
         <app-code [code]="code" selector="button-badge-demo"></app-code>
     </section>`
@@ -22,12 +22,12 @@ export class BadgeDoc {
     code: Code = {
         basic: `
 <p-button label="Emails" badge="8"></p-button>
-<p-button label="Messages" icon="pi pi-users" styleClass="p-button-warning" badge="8" badgeClass="p-badge-danger"></p-button>`,
+<p-button label="Messages" icon="pi pi-users" severity="warning" badge="8" badgeClass="p-badge-danger"></p-button>`,
 
         html: `
 <div class="card flex justify-content-center">
     <p-button label="Emails" badge="8"></p-button>
-    <p-button label="Messages" icon="pi pi-users" styleClass="p-button-warning" badge="8" badgeClass="p-badge-danger"></p-button>
+    <p-button label="Messages" icon="pi pi-users" severity="warning" badge="8" badgeClass="p-badge-danger"></p-button>
 </div>`,
 
         typescript: `
diff --git a/src/app/showcase/doc/button/iconsonlydoc.ts b/src/app/showcase/doc/button/iconsonlydoc.ts
index cd332a013e6..6fea6f6a6b3 100644
--- a/src/app/showcase/doc/button/iconsonlydoc.ts
+++ b/src/app/showcase/doc/button/iconsonlydoc.ts
@@ -10,48 +10,48 @@ import { Code } from '../../domain/code';
         <div class="card">
             <div class="flex justify-content-center flex-wrap gap-3 mb-4">
                 <p-button icon="pi pi-check"></p-button>
-                <p-button icon="pi pi-bookmark" styleClass="p-button-secondary"></p-button>
-                <p-button icon="pi pi-search" styleClass="p-button-success"></p-button>
-                <p-button icon="pi pi-user" styleClass="p-button-info"></p-button>
-                <p-button icon="pi pi-bell" styleClass="p-button-warning"></p-button>
-                <p-button icon="pi pi-heart" styleClass="p-button-help"></p-button>
-                <p-button icon="pi pi-times" styleClass="p-button-danger"></p-button>
+                <p-button icon="pi pi-bookmark" severity="secondary"></p-button>
+                <p-button icon="pi pi-search" severity="success"></p-button>
+                <p-button icon="pi pi-user" severity="info"></p-button>
+                <p-button icon="pi pi-bell" severity="warning"></p-button>
+                <p-button icon="pi pi-heart" severity="help"></p-button>
+                <p-button icon="pi pi-times" severity="danger"></p-button>
             </div>
             <div class="flex justify-content-center flex-wrap gap-3 mb-4">
-                <p-button icon="pi pi-check" styleClass="p-button-rounded"></p-button>
-                <p-button icon="pi pi-bookmark" styleClass="p-button-rounded p-button-secondary"></p-button>
-                <p-button icon="pi pi-search" styleClass="p-button-rounded p-button-success"></p-button>
-                <p-button icon="pi pi-user" styleClass="p-button-rounded p-button-info"></p-button>
-                <p-button icon="pi pi-bell" styleClass="p-button-rounded p-button-warning"></p-button>
-                <p-button icon="pi pi-heart" styleClass="p-button-rounded p-button-help"></p-button>
-                <p-button icon="pi pi-times" styleClass="p-button-rounded p-button-danger"></p-button>
+                <p-button icon="pi pi-check" [rounded]="true"></p-button>
+                <p-button icon="pi pi-bookmark" [rounded]="true" severity="secondary"></p-button>
+                <p-button icon="pi pi-search" [rounded]="true" severity="success"></p-button>
+                <p-button icon="pi pi-user" [rounded]="true" severity="info"></p-button>
+                <p-button icon="pi pi-bell" [rounded]="true" severity="warning"></p-button>
+                <p-button icon="pi pi-heart" [rounded]="true" severity="help"></p-button>
+                <p-button icon="pi pi-times" [rounded]="true" severity="danger"></p-button>
             </div>
             <div class="flex justify-content-center flex-wrap gap-3 mb-4">
-                <p-button icon="pi pi-check" styleClass="p-button-rounded p-button-outlined"></p-button>
-                <p-button icon="pi pi-bookmark" styleClass="p-button-rounded p-button-secondary p-button-outlined"></p-button>
-                <p-button icon="pi pi-search" styleClass="p-button-rounded p-button-success p-button-outlined"></p-button>
-                <p-button icon="pi pi-user" styleClass="p-button-rounded p-button-info p-button-outlined"></p-button>
-                <p-button icon="pi pi-bell" styleClass="p-button-rounded p-button-warning p-button-outlined"></p-button>
-                <p-button icon="pi pi-heart" styleClass="p-button-rounded p-button-help p-button-outlined"></p-button>
-                <p-button icon="pi pi-times" styleClass="p-button-rounded p-button-danger p-button-outlined"></p-button>
+                <p-button icon="pi pi-check" [rounded]="true" [outlined]="true"></p-button>
+                <p-button icon="pi pi-bookmark" [rounded]="true" severity="secondary" [outlined]="true"></p-button>
+                <p-button icon="pi pi-search" [rounded]="true" severity="success" [outlined]="true"></p-button>
+                <p-button icon="pi pi-user" [rounded]="true" severity="info" [outlined]="true"></p-button>
+                <p-button icon="pi pi-bell" [rounded]="true" severity="warning" [outlined]="true"></p-button>
+                <p-button icon="pi pi-heart" [rounded]="true" severity="help" [outlined]="true"></p-button>
+                <p-button icon="pi pi-times" [rounded]="true" severity="danger" [outlined]="true"></p-button>
             </div>
             <div class="flex justify-content-center flex-wrap gap-3 mb-4">
-                <p-button icon="pi pi-check" styleClass="p-button-rounded p-button-text p-button-raised"></p-button>
-                <p-button icon="pi pi-bookmark" styleClass="p-button-rounded p-button-secondary p-button-text p-button-raised"></p-button>
-                <p-button icon="pi pi-search" styleClass="p-button-rounded p-button-success p-button-text p-button-raised"></p-button>
-                <p-button icon="pi pi-user" styleClass="p-button-rounded p-button-info p-button-text p-button-raised"></p-button>
-                <p-button icon="pi pi-bell" styleClass="p-button-rounded p-button-warning p-button-text p-button-raised"></p-button>
-                <p-button icon="pi pi-heart" styleClass="p-button-rounded p-button-help p-button-text p-button-raised"></p-button>
-                <p-button icon="pi pi-times" styleClass="p-button-rounded p-button-danger p-button-text p-button-raised"></p-button>
+                <p-button icon="pi pi-check" [rounded]="true" [text]="true" [raised]="true"></p-button>
+                <p-button icon="pi pi-bookmark" [rounded]="true" [text]="true" [raised]="true" severity="secondary "></p-button>
+                <p-button icon="pi pi-search" [rounded]="true" [text]="true" [raised]="true" severity="success "></p-button>
+                <p-button icon="pi pi-user" [rounded]="true" [text]="true" [raised]="true" severity="info "></p-button>
+                <p-button icon="pi pi-bell" [rounded]="true" [text]="true" [raised]="true" severity="warning "></p-button>
+                <p-button icon="pi pi-heart" [rounded]="true" [text]="true" [raised]="true" severity="help "></p-button>
+                <p-button icon="pi pi-times" [rounded]="true" [text]="true" [raised]="true" severity="danger "></p-button>
             </div>
             <div class="flex justify-content-center flex-wrap gap-3 mb-4">
-                <p-button icon="pi pi-check" styleClass="p-button-rounded p-button-text"></p-button>
-                <p-button icon="pi pi-bookmark" styleClass="p-button-rounded p-button-secondary p-button-text"></p-button>
-                <p-button icon="pi pi-search" styleClass="p-button-rounded p-button-success p-button-text"></p-button>
-                <p-button icon="pi pi-user" styleClass="p-button-rounded p-button-info p-button-text"></p-button>
-                <p-button icon="pi pi-bell" styleClass="p-button-rounded p-button-warning p-button-text"></p-button>
-                <p-button icon="pi pi-heart" styleClass="p-button-rounded p-button-help p-button-text"></p-button>
-                <p-button icon="pi pi-times" styleClass="p-button-rounded p-button-danger p-button-text"></p-button>
+                <p-button icon="pi pi-check" [rounded]="true" [text]="true"></p-button>
+                <p-button icon="pi pi-bookmark" [rounded]="true" [text]="true" severity="secondary "></p-button>
+                <p-button icon="pi pi-search" [rounded]="true" [text]="true" severity="success "></p-button>
+                <p-button icon="pi pi-user" [rounded]="true" [text]="true" severity="info "></p-button>
+                <p-button icon="pi pi-bell" [rounded]="true" [text]="true" severity="warning "></p-button>
+                <p-button icon="pi pi-heart" [rounded]="true" [text]="true" severity="help "></p-button>
+                <p-button icon="pi pi-times" [rounded]="true" [text]="true" severity="danger "></p-button>
             </div>
         </div>
         <app-code [code]="code" selector="button-icon-only-demo"></app-code>
@@ -65,91 +65,91 @@ export class IconOnlyDoc {
     code: Code = {
         basic: `
 <p-button icon="pi pi-check"></p-button>
-<p-button icon="pi pi-bookmark" styleClass="p-button-secondary"></p-button>
-<p-button icon="pi pi-search" styleClass="p-button-success"></p-button>
-<p-button icon="pi pi-user" styleClass="p-button-info"></p-button>
-<p-button icon="pi pi-bell" styleClass="p-button-warning"></p-button>
-<p-button icon="pi pi-heart" styleClass="p-button-help"></p-button>
-<p-button icon="pi pi-times" styleClass="p-button-danger"></p-button>
+<p-button icon="pi pi-bookmark" severity="secondary"></p-button>
+<p-button icon="pi pi-search" severity="success"></p-button>
+<p-button icon="pi pi-user" severity="info"></p-button>
+<p-button icon="pi pi-bell" severity="warning"></p-button>
+<p-button icon="pi pi-heart" severity="help"></p-button>
+<p-button icon="pi pi-times" severity="danger"></p-button>
 
-<p-button icon="pi pi-check" styleClass="p-button-rounded"></p-button>
-<p-button icon="pi pi-bookmark" styleClass="p-button-rounded p-button-secondary"></p-button>
-<p-button icon="pi pi-search" styleClass="p-button-rounded p-button-success"></p-button>
-<p-button icon="pi pi-user" styleClass="p-button-rounded p-button-info"></p-button>
-<p-button icon="pi pi-bell" styleClass="p-button-rounded p-button-warning"></p-button>
-<p-button icon="pi pi-heart" styleClass="p-button-rounded p-button-help"></p-button>
-<p-button icon="pi pi-times" styleClass="p-button-rounded p-button-danger"></p-button>
+<p-button icon="pi pi-check" [rounded]="true"></p-button>
+<p-button icon="pi pi-bookmark" [rounded]="true" severity="secondary"></p-button>
+<p-button icon="pi pi-search" [rounded]="true" severity="success"></p-button>
+<p-button icon="pi pi-user" [rounded]="true" severity="info"></p-button>
+<p-button icon="pi pi-bell" [rounded]="true" severity="warning"></p-button>
+<p-button icon="pi pi-heart" [rounded]="true" severity="help"></p-button>
+<p-button icon="pi pi-times" [rounded]="true" severity="danger"></p-button>
 
-<p-button icon="pi pi-check" styleClass="p-button-rounded p-button-outlined"></p-button>
-<p-button icon="pi pi-bookmark" styleClass="p-button-rounded p-button-secondary p-button-outlined"></p-button>
-<p-button icon="pi pi-search" styleClass="p-button-rounded p-button-success p-button-outlined"></p-button>
-<p-button icon="pi pi-user" styleClass="p-button-rounded p-button-info p-button-outlined"></p-button>
-<p-button icon="pi pi-bell" styleClass="p-button-rounded p-button-warning p-button-outlined"></p-button>
-<p-button icon="pi pi-heart" styleClass="p-button-rounded p-button-help p-button-outlined"></p-button>
-<p-button icon="pi pi-times" styleClass="p-button-rounded p-button-danger p-button-outlined"></p-button>
+<p-button icon="pi pi-check" [rounded]="true" [outlined]="true"></p-button>
+<p-button icon="pi pi-bookmark" [rounded]="true" severity="secondary" [outlined]="true"></p-button>
+<p-button icon="pi pi-search" [rounded]="true" severity="success" [outlined]="true"></p-button>
+<p-button icon="pi pi-user" [rounded]="true" severity="info" [outlined]="true"></p-button>
+<p-button icon="pi pi-bell" [rounded]="true" severity="warning" [outlined]="true"></p-button>
+<p-button icon="pi pi-heart" [rounded]="true" severity="help" [outlined]="true"></p-button>
+<p-button icon="pi pi-times" [rounded]="true" severity="danger" [outlined]="true"></p-button>
 
-<p-button icon="pi pi-check" styleClass="p-button-rounded p-button-text p-button-raised"></p-button>
-<p-button icon="pi pi-bookmark" styleClass="p-button-rounded p-button-secondary p-button-text p-button-raised"></p-button>
-<p-button icon="pi pi-search" styleClass="p-button-rounded p-button-success p-button-text p-button-raised"></p-button>
-<p-button icon="pi pi-user" styleClass="p-button-rounded p-button-info p-button-text p-button-raised"></p-button>
-<p-button icon="pi pi-bell" styleClass="p-button-rounded p-button-warning p-button-text p-button-raised"></p-button>
-<p-button icon="pi pi-heart" styleClass="p-button-rounded p-button-help p-button-text p-button-raised"></p-button>
-<p-button icon="pi pi-times" styleClass="p-button-rounded p-button-danger p-button-text p-button-raised"></p-button>
+<p-button icon="pi pi-check" [rounded]="true" [text]="true" [raised]="true"></p-button>
+<p-button icon="pi pi-bookmark" [rounded]="true" [text]="true" [raised]="true" severity="secondary "></p-button>
+<p-button icon="pi pi-search" [rounded]="true" [text]="true" [raised]="true" severity="success "></p-button>
+<p-button icon="pi pi-user" [rounded]="true" [text]="true" [raised]="true" severity="info "></p-button>
+<p-button icon="pi pi-bell" [rounded]="true" [text]="true" [raised]="true" severity="warning "></p-button>
+<p-button icon="pi pi-heart" [rounded]="true" [text]="true" [raised]="true" severity="help "></p-button>
+<p-button icon="pi pi-times" [rounded]="true" [text]="true" [raised]="true" severity="danger "></p-button>
 
-<p-button icon="pi pi-check" styleClass="p-button-rounded p-button-text"></p-button>
-<p-button icon="pi pi-bookmark" styleClass="p-button-rounded p-button-secondary p-button-text"></p-button>
-<p-button icon="pi pi-search" styleClass="p-button-rounded p-button-success p-button-text"></p-button>
-<p-button icon="pi pi-user" styleClass="p-button-rounded p-button-info p-button-text"></p-button>
-<p-button icon="pi pi-bell" styleClass="p-button-rounded p-button-warning p-button-text"></p-button>
-<p-button icon="pi pi-heart" styleClass="p-button-rounded p-button-help p-button-text"></p-button>
-<p-button icon="pi pi-times" styleClass="p-button-rounded p-button-danger p-button-text"></p-button>`,
+<p-button icon="pi pi-check" [rounded]="true" [text]="true"></p-button>
+<p-button icon="pi pi-bookmark" [rounded]="true" [text]="true" severity="secondary "></p-button>
+<p-button icon="pi pi-search" [rounded]="true" [text]="true" severity="success "></p-button>
+<p-button icon="pi pi-user" [rounded]="true" [text]="true" severity="info "></p-button>
+<p-button icon="pi pi-bell" [rounded]="true" [text]="true" severity="warning "></p-button>
+<p-button icon="pi pi-heart" [rounded]="true" [text]="true" severity="help "></p-button>
+<p-button icon="pi pi-times" [rounded]="true" [text]="true" severity="danger "></p-button>`,
 
         html: `
 <div class="card">
     <div class="flex justify-content-center flex-wrap gap-3 mb-4">
         <p-button icon="pi pi-check"></p-button>
-        <p-button icon="pi pi-bookmark" styleClass="p-button-secondary"></p-button>
-        <p-button icon="pi pi-search" styleClass="p-button-success"></p-button>
-        <p-button icon="pi pi-user" styleClass="p-button-info"></p-button>
-        <p-button icon="pi pi-bell" styleClass="p-button-warning"></p-button>
-        <p-button icon="pi pi-heart" styleClass="p-button-help"></p-button>
-        <p-button icon="pi pi-times" styleClass="p-button-danger"></p-button>
+        <p-button icon="pi pi-bookmark" severity="secondary"></p-button>
+        <p-button icon="pi pi-search" severity="success"></p-button>
+        <p-button icon="pi pi-user" severity="info"></p-button>
+        <p-button icon="pi pi-bell" severity="warning"></p-button>
+        <p-button icon="pi pi-heart" severity="help"></p-button>
+        <p-button icon="pi pi-times" severity="danger"></p-button>
     </div>
     <div class="flex justify-content-center flex-wrap gap-3 mb-4">
-        <p-button icon="pi pi-check" styleClass="p-button-rounded"></p-button>
-        <p-button icon="pi pi-bookmark" styleClass="p-button-rounded p-button-secondary"></p-button>
-        <p-button icon="pi pi-search" styleClass="p-button-rounded p-button-success"></p-button>
-        <p-button icon="pi pi-user" styleClass="p-button-rounded p-button-info"></p-button>
-        <p-button icon="pi pi-bell" styleClass="p-button-rounded p-button-warning"></p-button>
-        <p-button icon="pi pi-heart" styleClass="p-button-rounded p-button-help"></p-button>
-        <p-button icon="pi pi-times" styleClass="p-button-rounded p-button-danger"></p-button>
+        <p-button icon="pi pi-check" [rounded]="true"></p-button>
+        <p-button icon="pi pi-bookmark" [rounded]="true" severity="secondary"></p-button>
+        <p-button icon="pi pi-search" [rounded]="true" severity="success"></p-button>
+        <p-button icon="pi pi-user" [rounded]="true" severity="info"></p-button>
+        <p-button icon="pi pi-bell" [rounded]="true" severity="warning"></p-button>
+        <p-button icon="pi pi-heart" [rounded]="true" severity="help"></p-button>
+        <p-button icon="pi pi-times" [rounded]="true" severity="danger"></p-button>
     </div>
     <div class="flex justify-content-center flex-wrap gap-3 mb-4">
-        <p-button icon="pi pi-check" styleClass="p-button-rounded p-button-outlined"></p-button>
-        <p-button icon="pi pi-bookmark" styleClass="p-button-rounded p-button-secondary p-button-outlined"></p-button>
-        <p-button icon="pi pi-search" styleClass="p-button-rounded p-button-success p-button-outlined"></p-button>
-        <p-button icon="pi pi-user" styleClass="p-button-rounded p-button-info p-button-outlined"></p-button>
-        <p-button icon="pi pi-bell" styleClass="p-button-rounded p-button-warning p-button-outlined"></p-button>
-        <p-button icon="pi pi-heart" styleClass="p-button-rounded p-button-help p-button-outlined"></p-button>
-        <p-button icon="pi pi-times" styleClass="p-button-rounded p-button-danger p-button-outlined"></p-button>
+        <p-button icon="pi pi-check" [rounded]="true" [outlined]="true"></p-button>
+        <p-button icon="pi pi-bookmark" [rounded]="true" severity="secondary" [outlined]="true"></p-button>
+        <p-button icon="pi pi-search" [rounded]="true" severity="success" [outlined]="true"></p-button>
+        <p-button icon="pi pi-user" [rounded]="true" severity="info" [outlined]="true"></p-button>
+        <p-button icon="pi pi-bell" [rounded]="true" severity="warning" [outlined]="true"></p-button>
+        <p-button icon="pi pi-heart" [rounded]="true" severity="help" [outlined]="true"></p-button>
+        <p-button icon="pi pi-times" [rounded]="true" severity="danger" [outlined]="true"></p-button>
     </div>
     <div class="flex justify-content-center flex-wrap gap-3 mb-4">
-        <p-button icon="pi pi-check" styleClass="p-button-rounded p-button-text p-button-raised"></p-button>
-        <p-button icon="pi pi-bookmark" styleClass="p-button-rounded p-button-secondary p-button-text p-button-raised"></p-button>
-        <p-button icon="pi pi-search" styleClass="p-button-rounded p-button-success p-button-text p-button-raised"></p-button>
-        <p-button icon="pi pi-user" styleClass="p-button-rounded p-button-info p-button-text p-button-raised"></p-button>
-        <p-button icon="pi pi-bell" styleClass="p-button-rounded p-button-warning p-button-text p-button-raised"></p-button>
-        <p-button icon="pi pi-heart" styleClass="p-button-rounded p-button-help p-button-text p-button-raised"></p-button>
-        <p-button icon="pi pi-times" styleClass="p-button-rounded p-button-danger p-button-text p-button-raised"></p-button>
+        <p-button icon="pi pi-check" [rounded]="true" [text]="true" [raised]="true"></p-button>
+        <p-button icon="pi pi-bookmark" [rounded]="true" [text]="true" [raised]="true" severity="secondary "></p-button>
+        <p-button icon="pi pi-search" [rounded]="true" [text]="true" [raised]="true" severity="success "></p-button>
+        <p-button icon="pi pi-user" [rounded]="true" [text]="true" [raised]="true" severity="info "></p-button>
+        <p-button icon="pi pi-bell" [rounded]="true" [text]="true" [raised]="true" severity="warning "></p-button>
+        <p-button icon="pi pi-heart" [rounded]="true" [text]="true" [raised]="true" severity="help "></p-button>
+        <p-button icon="pi pi-times" [rounded]="true" [text]="true" [raised]="true" severity="danger "></p-button>
     </div>
     <div class="flex justify-content-center flex-wrap gap-3 mb-4">
-        <p-button icon="pi pi-check" styleClass="p-button-rounded p-button-text"></p-button>
-        <p-button icon="pi pi-bookmark" styleClass="p-button-rounded p-button-secondary p-button-text"></p-button>
-        <p-button icon="pi pi-search" styleClass="p-button-rounded p-button-success p-button-text"></p-button>
-        <p-button icon="pi pi-user" styleClass="p-button-rounded p-button-info p-button-text"></p-button>
-        <p-button icon="pi pi-bell" styleClass="p-button-rounded p-button-warning p-button-text"></p-button>
-        <p-button icon="pi pi-heart" styleClass="p-button-rounded p-button-help p-button-text"></p-button>
-        <p-button icon="pi pi-times" styleClass="p-button-rounded p-button-danger p-button-text"></p-button>
+        <p-button icon="pi pi-check" [rounded]="true" [text]="true"></p-button>
+        <p-button icon="pi pi-bookmark" [rounded]="true" [text]="true" severity="secondary "></p-button>
+        <p-button icon="pi pi-search" [rounded]="true" [text]="true" severity="success "></p-button>
+        <p-button icon="pi pi-user" [rounded]="true" [text]="true" severity="info "></p-button>
+        <p-button icon="pi pi-bell" [rounded]="true" [text]="true" severity="warning "></p-button>
+        <p-button icon="pi pi-heart" [rounded]="true" [text]="true" severity="help "></p-button>
+        <p-button icon="pi pi-times" [rounded]="true" [text]="true" severity="danger "></p-button>
     </div>
 </div>`,