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

fix/SW-3695-icons

* fix/SW-3695-icons

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
+                <MaterialIcon icon="call" color="CurrentColor" size={20} />
-                  icon="phone_enabled"
-                  color="CurrentColor"
-                  size={20}
-                />
                 {phoneNumber}
               </TextLink>
               <LocalCallCharges

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

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} />

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
+    <span data-testid="MaterialIcon" data-icon-name={icon} {...props}>
-      data-testid="MaterialIcon"
-      data-icon-name={icon}
-      className={`${styles.iconWrapper}`}
-      {...props}
-    >
       <IconComponent
         width={size}
         height={size}