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/ManageStay/ActionPanel/Actions/AddToCalendarButton.tsx

@@ -2,7 +2,8 @@
 
 import { useIntl } from "react-intl"
 
-import { CalendarAddIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Button from "@/components/TempDesignSystem/Button"
 import { trackMyStayPageLink } from "@/utils/tracking"
 
@@ -29,7 +30,7 @@ export default function AddToCalendarButton({
       onPress={handleAddToCalendar}
     >
       {intl.formatMessage({ id: "Add to calendar" })}
-      <CalendarAddIcon width={24} height={24} color="burgundy" />
+      <MaterialIcon icon="calendar_add_on" color="CurrentColor" />
     </Button>
   )
 }

apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/Actions/ModifyStay/NewDates/CalendarButton/index.tsx

@@ -2,10 +2,9 @@
 
 import { Button as ButtonRAC } from "react-aria-components"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import { CalendarIcon } from "@/components/Icons"
-
 import styles from "./calendarButton.module.css"
 
 interface CalendarButtonProps {
@@ -19,7 +18,7 @@ export default function CalendarButton({ text, onClick }: CalendarButtonProps) {
       <Typography variant="Body/Paragraph/mdRegular">
         <span>{text}</span>
       </Typography>
-      <CalendarIcon />
+      <MaterialIcon icon="calendar_today" />
     </ButtonRAC>
   )
 }

apps/scandic-web/components/HotelReservation/MyStay/ManageStay/ActionPanel/index.tsx

@@ -2,20 +2,15 @@
 
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { customerService } from "@/constants/currentWebHrefs"
+import { preliminaryReceipt } from "@/constants/routes/myStay"
 import { useManageStayStore } from "@/stores/my-stay/manageStayStore"
 import { useMyStayRoomDetailsStore } from "@/stores/my-stay/myStayRoomDetailsStore"
-import { preliminaryReceipt } from "@/constants/routes/myStay"
 
 import AddToCalendar from "@/components/HotelReservation/AddToCalendar"
 import { generateDateTime } from "@/components/HotelReservation/BookingConfirmation/Header/Actions/helpers"
-import {
-  CalendarIcon,
-  ChevronRightIcon,
-  CreditCard,
-  CrossCircleOutlineIcon,
-  DownloadIcon,
-} from "@/components/Icons"
 import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -109,7 +104,7 @@ export default function ActionPanel({ hotel }: ActionPanelProps) {
           className={styles.button}
         >
           {intl.formatMessage({ id: "Modify dates" })}
-          <CalendarIcon width={24} height={24} color="burgundy" />
+          <MaterialIcon icon="calendar_month" color="CurrentColor" />
         </Button>
         {showGuaranteeButton && (
           <Button
@@ -119,7 +114,7 @@ export default function ActionPanel({ hotel }: ActionPanelProps) {
             className={styles.button}
           >
             {intl.formatMessage({ id: "Guarantee late arrival" })}
-            <CreditCard width={24} height={24} color="burgundy" />
+            <MaterialIcon icon="credit_card" color="CurrentColor" />
           </Button>
         )}
         <AddToCalendar
@@ -136,7 +131,7 @@ export default function ActionPanel({ hotel }: ActionPanelProps) {
           onClick={handleDownloadInvoice}
         >
           {intl.formatMessage({ id: "Download invoice" })}
-          <DownloadIcon width={24} height={24} color="burgundy" />
+          <MaterialIcon icon="download" color="CurrentColor" />
         </Link>
         {showCancelStayButton && (
           <Button
@@ -146,7 +141,7 @@ export default function ActionPanel({ hotel }: ActionPanelProps) {
             className={styles.button}
           >
             {intl.formatMessage({ id: "Cancel stay" })}
-            <CrossCircleOutlineIcon width={24} height={24} color="burgundy" />
+            <MaterialIcon icon="cancel" color="CurrentColor" />
           </Button>
         )}
       </div>
@@ -184,7 +179,7 @@ export default function ActionPanel({ hotel }: ActionPanelProps) {
           <Caption color="burgundy">
             {intl.formatMessage({ id: "Customer support" })}
           </Caption>
-          <ChevronRightIcon width={20} height={20} color="burgundy" />
+          <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
         </Link>
       </div>
     </div>

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

@@ -2,10 +2,11 @@
 
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { useManageStayStore } from "@/stores/my-stay/manageStayStore"
 import { useMyStayRoomDetailsStore } from "@/stores/my-stay/myStayRoomDetailsStore"
 
-import { ChevronDownIcon } from "@/components/Icons"
 import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
 
@@ -74,7 +75,7 @@ export default function ManageStay({
         disabled={allRoomsCancelled}
       >
         {intl.formatMessage({ id: "Manage stay" })}
-        <ChevronDownIcon width={24} height={24} color="burgundy" />
+        <MaterialIcon icon="keyboard_arrow_down" color="Icon/Inverted" />
       </Button>
       {isOpen && (
         <Modal