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/BookingConfirmation/Rooms/Room/index.tsx

@@ -2,16 +2,12 @@
 
 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 {
-  CheckCircleIcon,
-  ChevronRightSmallIcon,
-  CrossCircle,
-} from "@/components/Icons"
 import Image from "@/components/Image"
 import Link from "@/components/TempDesignSystem/Link"
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -42,14 +38,22 @@ export default function Room({ booking, img, roomName }: RoomProps) {
         <div className={styles.benefits}>
           {booking.rateDefinition.isMemberRate ? (
             <>
-              <CheckCircleIcon color="green" height={20} width={20} />
+              <MaterialIcon
+                color="Icon/Feedback/Success"
+                icon="check_circle"
+                size={20}
+              />
               <Caption>
                 {intl.formatMessage({ id: "Membership benefits applied" })}
               </Caption>
             </>
           ) : (
             <>
-              <CrossCircle color="red" height={20} width={20} />
+              <MaterialIcon
+                color="Icon/Interactive/Accent"
+                icon="cancel"
+                size={20}
+              />
               <Caption>
                 {intl.formatMessage({ id: "No membership benefits applied" })}
               </Caption>
@@ -58,7 +62,11 @@ export default function Room({ booking, img, roomName }: RoomProps) {
         </div>
         {booking.guaranteeInfo && (
           <div className={styles.benefits}>
-            <CheckCircleIcon color="green" height={20} width={20} />
+            <MaterialIcon
+              icon="check"
+              color="Icon/Feedback/Success"
+              size={20}
+            />
             <Typography variant="Body/Supporting text (caption)/smRegular">
               <p>
                 <strong>
@@ -90,7 +98,11 @@ export default function Room({ booking, img, roomName }: RoomProps) {
             </Subtitle>
             <Link color="burgundy" href="" variant="icon">
               {intl.formatMessage({ id: "View room details" })}
-              <ChevronRightSmallIcon color="burgundy" />
+              <MaterialIcon
+                icon="chevron_right"
+                size={20}
+                color="CurrentColor"
+              />
             </Link>
           </div>
           <ul className={styles.details}>