fix(SW-2101): Avoid underline on icons

Approved-by: Linus Flood
2025-04-07 10:38:00 +00:00
parent 39059eb8b2
commit 8d34e1c8bb
2 changed files with 7 additions and 1 deletions
--- 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>
+  )
 }