Merged in feat/SW-1711-switch-icons (pull request #1558)

Switches out all the old icons to new ones, and moves them to the design system. The new icons are of three different types: Materialise Symbol, Nucleo, and Customized. Also adds further mapping between facilities/amenities and icons.

Approved-by: Michael Zetterberg
Approved-by: Erik Tiekstra

apps/scandic-web/components/HotelReservation/MyStay/MultiRoom/ToggleSidePeek.tsx

@@ -1,8 +1,9 @@
 "use client"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import useSidePeekStore from "@/stores/sidepeek"
 
-import { ExpandIcon } from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 
 import styles from "./toggleSidePeek.module.css"
@@ -36,7 +37,7 @@ export default function ToggleSidePeek({
       wrapping
     >
       <div className={styles.iconContainer}>
-        <ExpandIcon />
+        <MaterialIcon icon="pan_zoom" color="CurrentColor" />
       </div>
     </Button>
   )

apps/scandic-web/components/HotelReservation/MyStay/MultiRoom/index.tsx

@@ -2,6 +2,7 @@
 import { use, useEffect } from "react"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { BookingStatusEnum } from "@/constants/booking"
@@ -9,13 +10,12 @@ import { dt } from "@/lib/dt"
 import { useMyStayRoomDetailsStore } from "@/stores/my-stay/myStayRoomDetailsStore"
 import { useMyStayTotalPriceStore } from "@/stores/my-stay/myStayTotalPrice"
 
-import CrossCircleIcon from "@/components/Icons/CrossCircle"
 import Image from "@/components/Image"
 import Divider from "@/components/TempDesignSystem/Divider"
 import IconChip from "@/components/TempDesignSystem/IconChip"
 import useLang from "@/hooks/useLang"
 
-import { getIconForFeatureCode } from "../../utils"
+import { IconForFeatureCode } from "../../utils"
 import Price from "../Price"
 import { hasBreakfastPackage } from "../utils/hasBreakfastPackage"
 import { mapRoomDetails } from "../utils/mapRoomDetails"
@@ -156,7 +156,13 @@ export default function MultiRoom({
         {isCancelled ? (
           <IconChip
             color={"red"}
-            icon={<CrossCircleIcon width={20} height={20} color="red" />}
+            icon={
+              <MaterialIcon
+                icon="cancel"
+                size={20}
+                color="Icon/Feedback/Error"
+              />
+            }
           >
             <Typography variant="Body/Supporting text (caption)/smBold">
               <span>{intl.formatMessage({ id: "Cancelled" })}</span>
@@ -216,10 +222,13 @@ export default function MultiRoom({
                 )
               )
               .map((item) => {
-                const Icon = getIconForFeatureCode(item.code)
                 return (
                   <span className={styles.package} key={item.code}>
-                    <Icon width={16} height={16} color="burgundy" />
+                    <IconForFeatureCode
+                      featureCode={item.code}
+                      size={16}
+                      color="Icon/Interactive/Default"
+                    />
                   </span>
                 )
               })}