fix(SW-2101): Avoid underline on icons

Approved-by: Linus Flood

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>
+  )
 }

packages/design-system/lib/components/Icons/icon.module.css

@@ -1,5 +1,6 @@
 .icon {
   margin: 0;
+  vertical-align: middle;
 }
 
 /* Icon */