From 4958f932aaf414ad8bc4291b81b259a6d096ee3f Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Fri, 1 Apr 2022 11:27:46 +0100
Subject: [PATCH] wrap icons in a div to ensure they're centred (#47136)

---
 .../app/core/components/NavBar/Next/NavBarMenu.tsx  | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/public/app/core/components/NavBar/Next/NavBarMenu.tsx b/public/app/core/components/NavBar/Next/NavBarMenu.tsx
index 404a60f3989..d7fed06bd05 100644
--- a/public/app/core/components/NavBar/Next/NavBarMenu.tsx
+++ b/public/app/core/components/NavBar/Next/NavBarMenu.tsx
@@ -135,10 +135,12 @@ function NavItem({
           isActive={link === activeItem}
         >
           <div className={styles.savedItemsMenuItemWrapper}>
-            {link.img && (
-              <img src={link.img} alt={`${link.text} logo`} height="24" width="24" style={{ borderRadius: '50%' }} />
-            )}
-            {link.icon && <Icon name={link.icon as IconName} size="xl" />}
+            <div className={styles.iconContainer}>
+              {link.icon && <Icon name={link.icon as IconName} size="xl" />}
+              {link.img && (
+                <img src={link.img} alt={`${link.text} logo`} height="24" width="24" style={{ borderRadius: '50%' }} />
+              )}
+            </div>
             <span className={styles.linkText}>{link.text}</span>
           </div>
         </NavBarItemWithoutMenu>
@@ -177,6 +179,9 @@ const getNavItemStyles = (theme: GrafanaTheme2) => ({
   fullWidth: css({
     width: '100%',
   }),
+  iconContainer: css({
+    placeContent: 'center',
+  }),
   savedItemsMenuItemWrapper: css({
     display: 'grid',
     gridAutoFlow: 'column',