From 1ad648639c555df49cbe89920ef1919bd95dcfc0 Mon Sep 17 00:00:00 2001
From: Linus Flood <linus.flood@scandichotels.com>
Date: Wed, 21 Jan 2026 10:26:42 +0000
Subject: [PATCH] Merged in fix/phone-icon (pull request #3465)

fix/SW-3695-icons

* fix/SW-3695-icons
---
 .../ContentType/HotelPage/IntroSection/index.tsx          | 6 +-----
 apps/scandic-web/components/MyPages/Profile/index.tsx     | 2 +-
 .../Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx      | 2 +-
 .../selectHotelMapContent.module.css                      | 2 +-
 .../components/Form/Compositions/ExampleForm.stories.tsx  | 2 +-
 .../design-system/lib/components/Icons/FacilityIcon.tsx   | 2 +-
 .../design-system/lib/components/Icons/IconByIconName.tsx | 2 +-
 .../lib/components/Icons/MaterialIcon/index.module.css    | 3 ---
 .../lib/components/Icons/MaterialIcon/index.tsx           | 8 +-------
 9 files changed, 8 insertions(+), 21 deletions(-)
 delete mode 100644 packages/design-system/lib/components/Icons/MaterialIcon/index.module.css

diff --git a/apps/scandic-web/components/ContentType/HotelPage/IntroSection/index.tsx b/apps/scandic-web/components/ContentType/HotelPage/IntroSection/index.tsx
index 9cbd27fba..9e06f63e9 100644
--- a/apps/scandic-web/components/ContentType/HotelPage/IntroSection/index.tsx
+++ b/apps/scandic-web/components/ContentType/HotelPage/IntroSection/index.tsx
@@ -93,11 +93,7 @@ export default async function IntroSection({
           >
             <div className={styles.phoneNumber}>
               <TextLink href={`tel:${phoneNumber}`} typography="Link/sm">
-                <MaterialIcon
-                  icon="phone_enabled"
-                  color="CurrentColor"
-                  size={20}
-                />
+                <MaterialIcon icon="call" color="CurrentColor" size={20} />
                 {phoneNumber}
               </TextLink>
               <LocalCallCharges
diff --git a/apps/scandic-web/components/MyPages/Profile/index.tsx b/apps/scandic-web/components/MyPages/Profile/index.tsx
index 4b5c129dd..00e38ba63 100644
--- a/apps/scandic-web/components/MyPages/Profile/index.tsx
+++ b/apps/scandic-web/components/MyPages/Profile/index.tsx
@@ -84,7 +84,7 @@ export default async function Profile() {
       value: user.dateOfBirth,
     },
     {
-      icon: "phone_enabled",
+      icon: "call",
       label: intl.formatMessage({
         id: "common.phoneNumber",
         defaultMessage: "Phone number",
diff --git a/apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx b/apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx
index d37982683..d98897adc 100644
--- a/apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx
+++ b/apps/scandic-web/components/Sidebar/JoinLoyalty/Contact/ContactRow/index.tsx
@@ -67,7 +67,7 @@ export default async function ContactRow({ contact }: ContactRowProps) {
 }
 
 function PhoneIcon(props: MaterialIconSetIconProps) {
-  return <MaterialIcon icon="phone_enabled" {...props} />
+  return <MaterialIcon icon="call" {...props} />
 }
 function MailIcon(props: MaterialIconSetIconProps) {
   return <MaterialIcon icon="mail" {...props} />
diff --git a/packages/booking-flow/lib/components/SelectHotel/SelectHotelMap/SelectHotelMapContent/selectHotelMapContent.module.css b/packages/booking-flow/lib/components/SelectHotel/SelectHotelMap/SelectHotelMapContent/selectHotelMapContent.module.css
index ac56a0a7f..beef9592a 100644
--- a/packages/booking-flow/lib/components/SelectHotel/SelectHotelMap/SelectHotelMapContent/selectHotelMapContent.module.css
+++ b/packages/booking-flow/lib/components/SelectHotel/SelectHotelMap/SelectHotelMapContent/selectHotelMapContent.module.css
@@ -29,7 +29,7 @@
 .link {
   display: flex;
   gap: var(--Space-x05);
-  align-items: center;
+  align-items: baseline;
 }
 
 .bookingCodeFilter {
diff --git a/packages/design-system/lib/components/Form/Compositions/ExampleForm.stories.tsx b/packages/design-system/lib/components/Form/Compositions/ExampleForm.stories.tsx
index dadaa69ad..b5037f5ec 100644
--- a/packages/design-system/lib/components/Form/Compositions/ExampleForm.stories.tsx
+++ b/packages/design-system/lib/components/Form/Compositions/ExampleForm.stories.tsx
@@ -611,7 +611,7 @@ function InputShowcase() {
             <FormInput
               name="clearLeftRight"
               label="Clear with Left Icon"
-              leftIcon={<MaterialIcon icon="phone_enabled" />}
+              leftIcon={<MaterialIcon icon="call" />}
               showClearContentIcon
             />
             <FormInput
diff --git a/packages/design-system/lib/components/Icons/FacilityIcon.tsx b/packages/design-system/lib/components/Icons/FacilityIcon.tsx
index 7e3725647..a6414f84d 100644
--- a/packages/design-system/lib/components/Icons/FacilityIcon.tsx
+++ b/packages/design-system/lib/components/Icons/FacilityIcon.tsx
@@ -172,7 +172,7 @@ const MaterialIconMappings: {
   { icon: "local_parking", name: "parking" },
   { icon: "local_parking", name: "parkingfreeparking" },
   { icon: "pets", name: "petfriendlyrooms" },
-  { icon: "phone_enabled", name: "directdialphoneandvoicemail" },
+  { icon: "call", name: "directdialphoneandvoicemail" },
   { icon: "restaurant", name: "restaurant" },
   { icon: "room_service", name: "roomservice" },
   { icon: "sauna", name: "sauna" },
diff --git a/packages/design-system/lib/components/Icons/IconByIconName.tsx b/packages/design-system/lib/components/Icons/IconByIconName.tsx
index 83b8b6b3f..77acce077 100644
--- a/packages/design-system/lib/components/Icons/IconByIconName.tsx
+++ b/packages/design-system/lib/components/Icons/IconByIconName.tsx
@@ -137,7 +137,7 @@ export function IconByIconName({
       return <MaterialIcon icon="photo_camera" {...props} />
     case IconName.Cellphone:
     case IconName.Phone:
-      return <MaterialIcon icon="phone_enabled" {...props} />
+      return <MaterialIcon icon="call" {...props} />
     case IconName.HairdryerInRoomAllScandic:
       return <HairdryerIcon {...props} />
     case IconName.ComplimentaryColdRefreshments:
diff --git a/packages/design-system/lib/components/Icons/MaterialIcon/index.module.css b/packages/design-system/lib/components/Icons/MaterialIcon/index.module.css
deleted file mode 100644
index 84993602d..000000000
--- a/packages/design-system/lib/components/Icons/MaterialIcon/index.module.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.iconWrapper {
-  display: flex;
-}
diff --git a/packages/design-system/lib/components/Icons/MaterialIcon/index.tsx b/packages/design-system/lib/components/Icons/MaterialIcon/index.tsx
index 4810f6e94..a3dfa28b3 100644
--- a/packages/design-system/lib/components/Icons/MaterialIcon/index.tsx
+++ b/packages/design-system/lib/components/Icons/MaterialIcon/index.tsx
@@ -2,7 +2,6 @@ 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
@@ -52,12 +51,7 @@ export function MaterialIcon({
   const iconClassName = iconVariants({ color })
 
   return (
-    <span
-      data-testid="MaterialIcon"
-      data-icon-name={icon}
-      className={`${styles.iconWrapper}`}
-      {...props}
-    >
+    <span data-testid="MaterialIcon" data-icon-name={icon} {...props}>
       <IconComponent
         width={size}
         height={size}