From cc3074b246376c8e2982665f9321e494ab873576 Mon Sep 17 00:00:00 2001
From: desig9stein <mspopovv@gmail.com>
Date: Mon, 10 Nov 2025 12:01:39 +0200
Subject: [PATCH] fix(navbar): adjust icon sizes and spacing across themes

- Standardize `--component-size` for icons in navbar themes.
- Remove redundant `--ig-size` definitions from shared themes.
- Add padding and auto sizing for indigo theme icons.
- Update icon button styles for consistent behavior across themes.
---
 .../components/icon-button/_icon-button-theme.scss  |  7 +++----
 .../src/lib/navbar/themes/_base.scss                |  8 +++++++-
 .../src/lib/navbar/themes/shared/_bootstrap.scss    |  5 -----
 .../src/lib/navbar/themes/shared/_indigo.scss       | 13 ++++++-------
 4 files changed, 16 insertions(+), 17 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss
index c4bc2d7fffb..5c967a28bb1 100644
--- a/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss
+++ b/projects/igniteui-angular/src/lib/core/styles/components/icon-button/_icon-button-theme.scss
@@ -93,12 +93,11 @@
             );
 
             igx-icon {
-                --component-size: var(--ig-size, var(--ig-size-large));
+                --igx-icon-size: #{$icon-in-button-size};
+                --component-size: 2;
+
                 display: flex;
                 justify-content: center;
-                width: var(--igx-icon-size, #{$icon-in-button-size});
-                height: var(--igx-icon-size, #{$icon-in-button-size});
-                font-size: var(--igx-icon-size, #{$icon-in-button-size});
             }
 
             @if $variant == 'fluent' {
diff --git a/projects/igniteui-angular/src/lib/navbar/themes/_base.scss b/projects/igniteui-angular/src/lib/navbar/themes/_base.scss
index 82210962c6d..33e50991005 100644
--- a/projects/igniteui-angular/src/lib/navbar/themes/_base.scss
+++ b/projects/igniteui-angular/src/lib/navbar/themes/_base.scss
@@ -24,7 +24,8 @@ $_theme: $material;
 
         igx-icon,
         igc-icon {
-            --component-size: var(--ig-size, var(--ig-size-large));
+            --component-size: var(--ig-size-large);
+
             cursor: pointer;
         }
 
@@ -79,6 +80,11 @@ $_theme: $material;
             --ig-size: 1;
         }
 
+        [igxIconButton],
+        igc-icon-button {
+            --ig-size: 2;
+        }
+
         @include e(title) {
             @extend %igx-navbar-title;
         }
diff --git a/projects/igniteui-angular/src/lib/navbar/themes/shared/_bootstrap.scss b/projects/igniteui-angular/src/lib/navbar/themes/shared/_bootstrap.scss
index 679ca8fa996..850fdb4ae65 100644
--- a/projects/igniteui-angular/src/lib/navbar/themes/shared/_bootstrap.scss
+++ b/projects/igniteui-angular/src/lib/navbar/themes/shared/_bootstrap.scss
@@ -3,11 +3,6 @@
 @use 'styles/themes/standalone' as *;
 
 @include themed-block(igx-navbar, bootstrap) {
-    [igxButton],
-    [igxIconButton] {
-        --ig-size: 2;
-    }
-
     @include e(title) {
         @include type-style(h5) {
             margin: 0;
diff --git a/projects/igniteui-angular/src/lib/navbar/themes/shared/_indigo.scss b/projects/igniteui-angular/src/lib/navbar/themes/shared/_indigo.scss
index 3449e8554c2..e7bfe2984ae 100644
--- a/projects/igniteui-angular/src/lib/navbar/themes/shared/_indigo.scss
+++ b/projects/igniteui-angular/src/lib/navbar/themes/shared/_indigo.scss
@@ -6,9 +6,12 @@
     %icon-size {
         igx-icon,
         igc-icon {
-            --component-size: var(--ig-size, var(--ig-size-medium));
-    
-            margin-inline: rem(6px);
+            --component-size: var(--ig-size-medium);
+            --size: auto;
+
+            width: auto !important;
+            height: auto !important;
+            padding: rem(6px);
         }
     }
 
@@ -16,10 +19,6 @@
         --ig-size: 2;
     }
 
-    [igxIconButton] {
-        --ig-size: 2;
-    }
-
     igx-navbar-title,
     [igxNavbarTitle] {
         @include type-style(h5);