From 2d8df528ac2f6bcbc3a23c27503a453740ddb6b3 Mon Sep 17 00:00:00 2001
From: Linus Flood <linus.flood@scandichotels.com>
Date: Wed, 21 Jan 2026 12:34:24 +0000
Subject: [PATCH] Merged in fix/icons (pull request #3468)

feat(SW-3695): more icons fixes...

* feat(SW-3695): more icons fixes...
---
 .../FormContent/ValidationError/index.tsx                 | 6 +-----
 .../GuestsRoomsPicker/ValidationError/index.tsx           | 6 +-----
 .../RoomsList/RoomListItem/RoomNotAvailable/index.tsx     | 6 +-----
 .../lib/components/Icons/MaterialIcon/index.module.css    | 7 +++++++
 .../lib/components/Icons/MaterialIcon/index.tsx           | 8 +++++++-
 5 files changed, 17 insertions(+), 16 deletions(-)
 create mode 100644 packages/design-system/lib/components/Icons/MaterialIcon/index.module.css

diff --git a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/ValidationError/index.tsx b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/ValidationError/index.tsx
index df823c028..03840335f 100644
--- a/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/ValidationError/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/ValidationError/index.tsx
@@ -15,11 +15,7 @@ export default function ValidationError() {
         variant="Body/Supporting text (caption)/smBold"
       >
         <span>
-          <MaterialIcon
-            icon="error_circle_rounded"
-            color="Icon/Feedback/Error"
-            size={20}
-          />
+          <MaterialIcon icon="error" color="Icon/Feedback/Error" size={20} />
           {intl.formatMessage({
             id: "bookingWidget.validationError.destination",
             defaultMessage: "Enter destination or hotel",
diff --git a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ValidationError/index.tsx b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ValidationError/index.tsx
index 5de9ff649..52d176c14 100644
--- a/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ValidationError/index.tsx
+++ b/packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ValidationError/index.tsx
@@ -20,11 +20,7 @@ export default function ValidationError() {
         variant="Body/Supporting text (caption)/smBold"
       >
         <span>
-          <MaterialIcon
-            icon="error_circle_rounded"
-            color="Icon/Feedback/Error"
-            size={20}
-          />
+          <MaterialIcon icon="error" color="Icon/Feedback/Error" size={20} />
           {errorMessage}
         </span>
       </Typography>
diff --git a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomNotAvailable/index.tsx b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomNotAvailable/index.tsx
index 4a37499f1..206082a8f 100644
--- a/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomNotAvailable/index.tsx
+++ b/packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomNotAvailable/index.tsx
@@ -11,11 +11,7 @@ export default function RoomNotAvailable() {
   return (
     <div className={styles.noRoomsContainer}>
       <div className={styles.noRooms}>
-        <MaterialIcon
-          icon="error_circle_rounded"
-          color="Icon/Feedback/Error"
-          size={16}
-        />
+        <MaterialIcon icon="error" color="Icon/Feedback/Error" size={16} />
         <Typography variant="Body/Paragraph/mdRegular">
           <p>
             {intl.formatMessage({
diff --git a/packages/design-system/lib/components/Icons/MaterialIcon/index.module.css b/packages/design-system/lib/components/Icons/MaterialIcon/index.module.css
new file mode 100644
index 000000000..13ea3bc9f
--- /dev/null
+++ b/packages/design-system/lib/components/Icons/MaterialIcon/index.module.css
@@ -0,0 +1,7 @@
+.iconWrapper {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+  flex-shrink: 0;
+}
diff --git a/packages/design-system/lib/components/Icons/MaterialIcon/index.tsx b/packages/design-system/lib/components/Icons/MaterialIcon/index.tsx
index a3dfa28b3..4810f6e94 100644
--- a/packages/design-system/lib/components/Icons/MaterialIcon/index.tsx
+++ b/packages/design-system/lib/components/Icons/MaterialIcon/index.tsx
@@ -2,6 +2,7 @@ import { HTMLAttributes } from "react"
 import { MaterialIconName, materialIcons } from "./generated"
 import { VariantProps } from "class-variance-authority"
 import { iconVariants } from "../variants"
+import styles from "./index.module.css"
 
 export interface MaterialIconProps
   extends
@@ -51,7 +52,12 @@ export function MaterialIcon({
   const iconClassName = iconVariants({ color })
 
   return (
-    <span data-testid="MaterialIcon" data-icon-name={icon} {...props}>
+    <span
+      data-testid="MaterialIcon"
+      data-icon-name={icon}
+      className={`${styles.iconWrapper}`}
+      {...props}
+    >
       <IconComponent
         width={size}
         height={size}