Merged in fix/phone-icon (pull request #3465)

fix/SW-3695-icons

* fix/SW-3695-icons

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 {

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

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" },

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:

packages/design-system/lib/components/Icons/MaterialIcon/index.module.css

@@ -1,3 +0,0 @@
-.iconWrapper {
-  display: flex;
-}

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}