From d0bc859f9db68bcc72426425076b6f6fc261bff8 Mon Sep 17 00:00:00 2001
From: rohitratannagar <rohitratannagar2003@gmail.com>
Date: Wed, 5 Aug 2026 15:59:31 +0530
Subject: [PATCH] fix(global-header): icon rendering

Signed-off-by: rohitratannagar <rohitratannagar2003@gmail.com>
---
 .../.changeset/real-windows-remain.md         |  5 +++++
 .../src/components/HeaderIcon/HeaderIcon.tsx  | 21 ++++++++++++++++++-
 .../HeaderIconButton/HeaderIconButton.tsx     |  2 +-
 3 files changed, 26 insertions(+), 2 deletions(-)
 create mode 100644 workspaces/global-header/.changeset/real-windows-remain.md

diff --git a/workspaces/global-header/.changeset/real-windows-remain.md b/workspaces/global-header/.changeset/real-windows-remain.md
new file mode 100644
index 00000000000..e5e3523ec01
--- /dev/null
+++ b/workspaces/global-header/.changeset/real-windows-remain.md
@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-global-header': patch
+---
+
+Fixes the icon of global-header
diff --git a/workspaces/global-header/plugins/global-header/src/components/HeaderIcon/HeaderIcon.tsx b/workspaces/global-header/plugins/global-header/src/components/HeaderIcon/HeaderIcon.tsx
index dffbd4cbbbd..b02d77753f9 100644
--- a/workspaces/global-header/plugins/global-header/src/components/HeaderIcon/HeaderIcon.tsx
+++ b/workspaces/global-header/plugins/global-header/src/components/HeaderIcon/HeaderIcon.tsx
@@ -13,10 +13,12 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import type { CSSProperties } from 'react';
+import type { CSSProperties, ComponentType } from 'react';
 import { useApp } from '@backstage/core-plugin-api';
+import type { SvgIconProps } from '@mui/material/SvgIcon';
 import MuiIcon from '@mui/material/Icon';
 import Box from '@mui/material/Box';
+import AddCircleOutlineIcon from '@mui/icons-material/AddCircleOutline';
 
 /**
  * @public
@@ -35,6 +37,14 @@ function toMaterialIconLigature(name: string): string {
   return name.replace(/[A-Z]/g, m => `_${m.toLowerCase()}`);
 }
 
+/**
+ * Bundled MUI icon fallbacks for names used in default toolbar extensions.
+ * Avoids reliance on the Material Icons web font being loaded at runtime.
+ */
+const BUILTIN_ICONS: Record<string, ComponentType<SvgIconProps>> = {
+  addCircleOutline: AddCircleOutlineIcon,
+};
+
 /**
  * @public
  */
@@ -57,6 +67,15 @@ export const HeaderIcon = ({
     );
   }
 
+  const BuiltinIcon = BUILTIN_ICONS[icon];
+  if (BuiltinIcon) {
+    return (
+      <Box sx={{ display: 'flex', alignItems: 'center', ...layout }}>
+        <BuiltinIcon fontSize={size} />
+      </Box>
+    );
+  }
+
   if (icon.startsWith('<svg')) {
     const svgDataUri = `data:image/svg+xml;base64,${btoa(icon)}`;
     return (
diff --git a/workspaces/global-header/plugins/global-header/src/components/HeaderIconButton/HeaderIconButton.tsx b/workspaces/global-header/plugins/global-header/src/components/HeaderIconButton/HeaderIconButton.tsx
index bdbe48e0a46..a432ce0aa24 100644
--- a/workspaces/global-header/plugins/global-header/src/components/HeaderIconButton/HeaderIconButton.tsx
+++ b/workspaces/global-header/plugins/global-header/src/components/HeaderIconButton/HeaderIconButton.tsx
@@ -48,7 +48,7 @@ export const HeaderIconButton = ({
   icon,
   tooltip,
   color = 'inherit',
-  size = 'small',
+  size = 'medium',
   ariaLabel,
   to,
 }: HeaderIconButtonProps) => {