From 8d34e1c8bbc14bf556297460b585fe0b1e3f58ae Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Mon, 7 Apr 2025 10:38:00 +0000
Subject: [PATCH] fix(SW-2101): Avoid underline on icons

Approved-by: Linus Flood
---
 .../lib/components/Icons/MaterialIcon/MaterialIcon.tsx     | 7 ++++++-
 .../design-system/lib/components/Icons/icon.module.css     | 1 +
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/design-system/lib/components/Icons/MaterialIcon/MaterialIcon.tsx b/packages/design-system/lib/components/Icons/MaterialIcon/MaterialIcon.tsx
index 265d98c17..838bc3e28 100644
--- a/packages/design-system/lib/components/Icons/MaterialIcon/MaterialIcon.tsx
+++ b/packages/design-system/lib/components/Icons/MaterialIcon/MaterialIcon.tsx
@@ -20,5 +20,10 @@ export function MaterialIcon({
   ...props
 }: MaterialIconProps) {
   const classNames = iconVariants({ className, color })
-  return <MaterialSymbol className={classNames} {...props} fill={isFilled} />
+  return (
+    // The span is used to prevent the MaterialSymbol from being underlined when used inside a link or button
+    <span>
+      <MaterialSymbol className={classNames} {...props} fill={isFilled} />
+    </span>
+  )
 }
diff --git a/packages/design-system/lib/components/Icons/icon.module.css b/packages/design-system/lib/components/Icons/icon.module.css
index fcccd83c6..8165bd79f 100644
--- a/packages/design-system/lib/components/Icons/icon.module.css
+++ b/packages/design-system/lib/components/Icons/icon.module.css
@@ -1,5 +1,6 @@
 .icon {
   margin: 0;
+  vertical-align: middle;
 }
 
 /* Icon */