From f2bc81c1a88b6eed79dd20d0e7c553af84c33fc4 Mon Sep 17 00:00:00 2001
From: Deniz Saganak <dilara.deniz.saganak@accenture.com>
Date: Wed, 22 Nov 2023 10:04:37 +0100
Subject: [PATCH] feat(ui-library): add vertical-align to center icons

---
 .../actions/buttons/text-button/index.css.ts   | 18 +++++++++++++-----
 .../actions/buttons/text-button/index.ts       | 14 ++++++++------
 2 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/packages/ui-library/src/components/actions/buttons/text-button/index.css.ts b/packages/ui-library/src/components/actions/buttons/text-button/index.css.ts
index a300397a2..ccf1b14b6 100644
--- a/packages/ui-library/src/components/actions/buttons/text-button/index.css.ts
+++ b/packages/ui-library/src/components/actions/buttons/text-button/index.css.ts
@@ -85,15 +85,22 @@ export const styleCustom = typeSafeNestedCss`
     display: block;
     text-align: center;
 
-   & > .trailing-icon-class {
+    & > .trailing-icon-class,
+    & > .leading-icon-class {
      display:inline;
      margin: auto;
-     color: red;
+     vertical-align: middle;
     }
   }
 
   .inline {
-    display: inline-flex;
+    display: inline;
+    & > .trailing-icon-class,
+    & > .leading-icon-class {
+      display:inline;
+      margin: auto;
+      vertical-align: middle;
+     }
   }
 
   .inline-block {
@@ -101,10 +108,11 @@ export const styleCustom = typeSafeNestedCss`
     text-align: center;
     margin: auto;
 
-    & > .trailing-icon-class {
+    & > .trailing-icon-class,
+    & > .leading-icon-class {
       display:inline;
       text-align:center;
-      color: red;
+      vertical-align: middle;
       }
   }
 `;
diff --git a/packages/ui-library/src/components/actions/buttons/text-button/index.ts b/packages/ui-library/src/components/actions/buttons/text-button/index.ts
index 1a22a4388..6f672dfe4 100644
--- a/packages/ui-library/src/components/actions/buttons/text-button/index.ts
+++ b/packages/ui-library/src/components/actions/buttons/text-button/index.ts
@@ -91,12 +91,14 @@ export class BlrTextButton extends LitElement {
       ]).toLowerCase() as SizesType;
 
       const labelAndIconGroup = html` ${this.hasIcon && this.iconPosition === 'leading'
-          ? BlrIconRenderFunction({
-              icon: calculateIconName(this.icon, iconSizeVariant),
-              size: iconSizeVariant,
-              hideAria: true,
-              classMap: iconClasses,
-            })
+          ? html`<div class="leading-icon-class">
+              ${BlrIconRenderFunction({
+                icon: calculateIconName(this.icon, iconSizeVariant),
+                size: iconSizeVariant,
+                hideAria: true,
+                classMap: iconClasses,
+              })}
+            </div>`
           : nothing}
         <span class="label">${this.label}</span>
         ${this.hasIcon && this.iconPosition === 'trailing'