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

@@ -2,19 +2,13 @@
 
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { CancellationRuleEnum } from "@/constants/booking"
 import { dt } from "@/lib/dt"
 import { useMyStayRoomDetailsStore } from "@/stores/my-stay/myStayRoomDetailsStore"
 
-import {
-  CheckCircleIcon,
-  DirectionsIcon,
-  EmailIcon,
-  LinkIcon,
-} from "@/components/Icons"
-import CrossCircleIcon from "@/components/Icons/CrossCircle"
 import IconChip from "@/components/TempDesignSystem/IconChip"
 import { Toast } from "@/components/TempDesignSystem/Toasts"
 import useLang from "@/hooks/useLang"
@@ -81,8 +75,14 @@ export default function BookingSummary({ hotel }: BookingSummaryProps) {
           chip={
             isCancelled ? (
               <IconChip
-                color={"red"}
-                icon={<CrossCircleIcon width={20} height={20} color="red" />}
+                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>
@@ -93,9 +93,17 @@ export default function BookingSummary({ hotel }: BookingSummaryProps) {
                 color={isPaid ? "green" : "red"}
                 icon={
                   isPaid ? (
-                    <CheckCircleIcon width={20} height={20} color="green" />
+                    <MaterialIcon
+                      icon="check_circle"
+                      size={20}
+                      color="Icon/Feedback/Success"
+                    />
                   ) : (
-                    <CrossCircleIcon width={20} height={20} color="red" />
+                    <MaterialIcon
+                      icon="cancel"
+                      size={20}
+                      color="Icon/Interactive/Accent"
+                    />
                   )
                 }
               >
@@ -136,19 +144,37 @@ export default function BookingSummary({ hotel }: BookingSummaryProps) {
             {
               href: directionsUrl,
               text: intl.formatMessage({ id: "Directions" }),
-              icon: <DirectionsIcon width={20} height={20} color="burgundy" />,
+              icon: (
+                <MaterialIcon
+                  icon="directions"
+                  size={20}
+                  color="Icon/Interactive/Default"
+                />
+              ),
               onClick: () => trackMyStayPageLink("see on map"),
             },
             {
               href: `mailto:${hotel.contactInformation.email}`,
               text: intl.formatMessage({ id: "Email" }),
-              icon: <EmailIcon width={20} height={20} color="burgundy" />,
+              icon: (
+                <MaterialIcon
+                  icon="mail"
+                  size={20}
+                  color="Icon/Interactive/Default"
+                />
+              ),
               onClick: () => trackMyStayPageLink("email us"),
             },
             {
               href: hotel.contactInformation.websiteUrl,
               text: intl.formatMessage({ id: "Homepage" }),
-              icon: <LinkIcon width={20} height={20} color="burgundy" />,
+              icon: (
+                <MaterialIcon
+                  icon="link"
+                  size={20}
+                  color="Icon/Interactive/Default"
+                />
+              ),
               onClick: () => trackMyStayPageLink("hotel homepage"),
             },
           ]}