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/EnterDetails/Details/Multiroom/JoinScandicFriendsCard/index.tsx

@@ -2,7 +2,8 @@
 
 import { useIntl } from "react-intl"
 
-import { CheckIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 import { useRoomContext } from "@/contexts/Details/Room"
@@ -65,7 +66,12 @@ export default function JoinScandicFriendsCard({
             className={styles.listItem}
             color="uiTextPlaceholder"
           >
-            <CheckIcon color="uiTextPlaceholder" height="20" /> {item.title}
+            <MaterialIcon
+              icon="check"
+              size={20}
+              color="Icon/Interactive/Placeholder"
+            />
+            {item.title}
           </Caption>
         ))}
       </div>

apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/JoinScandicFriendsCard/index.tsx

@@ -2,9 +2,10 @@
 
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { privacyPolicy } from "@/constants/currentWebHrefs"
 
-import { CheckIcon } from "@/components/Icons"
 import LoginButton from "@/components/LoginButton"
 import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
 import Link from "@/components/TempDesignSystem/Link"
@@ -85,7 +86,12 @@ export default function JoinScandicFriendsCard({
             color="uiTextPlaceholder"
             className={styles.listItem}
           >
-            <CheckIcon color="uiTextPlaceholder" height="20" /> {item.title}
+            <MaterialIcon
+              icon="check"
+              color="Icon/Interactive/Placeholder"
+              size={20}
+            />
+            {item.title}
           </Caption>
         ))}
       </div>

apps/scandic-web/components/HotelReservation/EnterDetails/Details/RoomOne/MemberPriceModal/index.tsx

@@ -2,7 +2,8 @@
 
 import { useIntl } from "react-intl"
 
-import { MagicWandIcon } from "@/components/Icons"
+import { MagicWandIcon } from "@scandic-hotels/design-system/Icons"
+
 import Modal from "@/components/Modal"
 import Button from "@/components/TempDesignSystem/Button"
 import Body from "@/components/TempDesignSystem/Text/Body"

apps/scandic-web/components/HotelReservation/EnterDetails/Details/SpecialRequests/index.tsx

@@ -1,7 +1,8 @@
 import { useState } from "react"
 import { useIntl } from "react-intl"
 
-import { ChevronDownIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Divider from "@/components/TempDesignSystem/Divider"
 import TextArea from "@/components/TempDesignSystem/Form/TextArea"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
@@ -28,7 +29,7 @@ export default function SpecialRequests() {
         >
           {intl.formatMessage({ id: "Special requests" })}
         </Footnote>
-        <ChevronDownIcon className={styles.chevron} />
+        <MaterialIcon icon="keyboard_arrow_down" className={styles.chevron} />
         <Divider className={styles.divider} color="subtle" />
       </button>
       <div className={styles.content}>