diff --git a/packages/design-system/lib/components/Icons/MaterialIcon/index.tsx b/packages/design-system/lib/components/Icons/MaterialIcon/index.tsx
index 4810f6e94..4cf0d4275 100644
--- a/packages/design-system/lib/components/Icons/MaterialIcon/index.tsx
+++ b/packages/design-system/lib/components/Icons/MaterialIcon/index.tsx
@@ -1,6 +1,6 @@
 import { HTMLAttributes } from "react"
 import { MaterialIconName, materialIcons } from "./generated"
-import { VariantProps } from "class-variance-authority"
+import { VariantProps, cx } from "class-variance-authority"
 import { iconVariants } from "../variants"
 import styles from "./index.module.css"
 
@@ -55,7 +55,7 @@ export function MaterialIcon({
     <span
       data-testid="MaterialIcon"
       data-icon-name={icon}
-      className={`${styles.iconWrapper}`}
+      className={cx(styles.iconWrapper, props.className)}
       {...props}
     >
       <IconComponent