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/SidePeeks/BookedRoomSidePeek/index.tsx

@@ -1,5 +1,9 @@
 import { useIntl } from "react-intl"
 
+import {
+  Discount22Icon,
+  MaterialIcon,
+} from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { dt } from "@/lib/dt"
@@ -8,16 +12,6 @@ import { useMyStayRoomDetailsStore } from "@/stores/my-stay/myStayRoomDetailsSto
 import GuestDetails from "@/components/HotelReservation/MyStay/GuestDetails"
 import Price from "@/components/HotelReservation/MyStay/Price"
 import { hasBreakfastPackage } from "@/components/HotelReservation/MyStay/utils/hasBreakfastPackage"
-import {
-  BedDoubleIcon,
-  BookingCodeIcon,
-  CoffeeIcon,
-  ContractIcon,
-  DoorOpenIcon,
-  PersonIcon,
-} from "@/components/Icons"
-import CrossCircleIcon from "@/components/Icons/CrossCircle"
-import Refresh from "@/components/Icons/Refresh"
 import ImageGallery from "@/components/ImageGallery"
 import Accordion from "@/components/TempDesignSystem/Accordion"
 import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
@@ -113,7 +107,13 @@ export default function BookedRoomSidePeek({
           {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>
@@ -161,7 +161,7 @@ export default function BookedRoomSidePeek({
           <div className={styles.roomDetails}>
             <div className={styles.row}>
               <span className={styles.rowTitle}>
-                <PersonIcon color="grey80" width={20} height={20} />
+                <MaterialIcon icon="person" color="Icon/Default" size={20} />
                 <Typography variant="Body/Paragraph/mdBold">
                   <p>{intl.formatMessage({ id: "Guests" })}</p>
                 </Typography>
@@ -178,7 +178,7 @@ export default function BookedRoomSidePeek({
             </div>
             <div className={styles.row}>
               <span className={styles.rowTitle}>
-                <ContractIcon color="grey80" width={20} height={20} />
+                <MaterialIcon icon="contract" color="Icon/Default" size={20} />
                 <Typography variant="Body/Paragraph/mdBold">
                   <p>{intl.formatMessage({ id: "Terms" })}</p>
                 </Typography>
@@ -191,7 +191,7 @@ export default function BookedRoomSidePeek({
             </div>
             <div className={styles.row}>
               <span className={styles.rowTitle}>
-                <Refresh color="grey80" width={20} height={20} />
+                <MaterialIcon icon="refresh" color="Icon/Default" size={20} />
                 <Typography variant="Body/Paragraph/mdBold">
                   <p>{intl.formatMessage({ id: "Modify By" })}</p>
                 </Typography>
@@ -209,7 +209,7 @@ export default function BookedRoomSidePeek({
             </div>
             <div className={styles.row}>
               <span className={styles.rowTitle}>
-                <CoffeeIcon color="grey80" width={20} height={20} />
+                <MaterialIcon icon="coffee" color="Icon/Default" size={20} />
                 <Typography variant="Body/Paragraph/mdBold">
                   <p>{intl.formatMessage({ id: "Breakfast" })}</p>
                 </Typography>
@@ -236,7 +236,11 @@ export default function BookedRoomSidePeek({
             ) && (
               <div className={styles.row}>
                 <span className={styles.rowTitle}>
-                  <DoorOpenIcon color="grey80" width={20} height={20} />
+                  <MaterialIcon
+                    icon="meeting_room"
+                    color="Icon/Default"
+                    size={20}
+                  />
                   <Typography variant="Body/Paragraph/mdBold">
                     <p>{intl.formatMessage({ id: "Room classification" })}</p>
                   </Typography>
@@ -260,7 +264,7 @@ export default function BookedRoomSidePeek({
 
             <div className={styles.row}>
               <span className={styles.rowTitle}>
-                <BedDoubleIcon color="grey80" width={20} height={20} />
+                <MaterialIcon icon="bed" color="Icon/Default" size={20} />
                 <Typography variant="Body/Paragraph/mdBold">
                   <p>{intl.formatMessage({ id: "Bed preference" })}</p>
                 </Typography>
@@ -289,7 +293,10 @@ export default function BookedRoomSidePeek({
             </div>
           </div>
           {bookingCode && (
-            <IconChip color={"blue"} icon={<BookingCodeIcon color="blue" />}>
+            <IconChip
+              color="blue"
+              icon={<Discount22Icon color="Icon/Feedback/Information" />}
+            >
               <Typography variant="Body/Supporting text (caption)/smBold">
                 <p className={styles.bookingCode}>
                   <strong>{intl.formatMessage({ id: "Booking code" })}</strong>