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/BookingWidget/Client.tsx

@@ -4,6 +4,8 @@ import { zodResolver } from "@hookform/resolvers/zod"
 import { use, useEffect, useRef, useState } from "react"
 import { FormProvider, useForm } from "react-hook-form"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { REDEMPTION } from "@/constants/booking"
 import { dt } from "@/lib/dt"
 import { trpc } from "@/lib/trpc/client"
@@ -13,7 +15,6 @@ import Form, {
   BookingWidgetFormSkeleton,
 } from "@/components/Forms/BookingWidget"
 import { bookingWidgetSchema } from "@/components/Forms/BookingWidget/schema"
-import { CloseLargeIcon } from "@/components/Icons"
 import useLang from "@/hooks/useLang"
 import useStickyPosition from "@/hooks/useStickyPosition"
 import { debounce } from "@/utils/debounce"
@@ -211,7 +212,7 @@ export default function BookingWidgetClient({
             onClick={closeMobileSearch}
             type="button"
           >
-            <CloseLargeIcon />
+            <MaterialIcon icon="close" />
           </button>
           <Form locations={locations} type={type} onClose={closeMobileSearch} />
         </div>

apps/scandic-web/components/BookingWidget/MobileToggleButton/index.tsx

@@ -3,9 +3,10 @@
 import { useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { dt } from "@/lib/dt"
 
-import { EditIcon, SearchIcon } from "@/components/Icons"
 import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -115,7 +116,7 @@ export default function MobileToggleButton({
             </Body>
           </div>
           <div className={styles.icon}>
-            <SearchIcon color="white" />
+            <MaterialIcon icon="search" color="Icon/Inverted" />
           </div>
         </>
       )}
@@ -139,7 +140,7 @@ export default function MobileToggleButton({
             </Caption>
           </div>
           <div className={styles.icon}>
-            <EditIcon color="white" />
+            <MaterialIcon icon="edit_square" color="Icon/Inverted" />
           </div>
         </>
       )}
@@ -169,7 +170,7 @@ export function MobileToggleButtonSkeleton() {
         <SkeletonShimmer height="24px" />
       </div>
       <div className={styles.icon}>
-        <SearchIcon color="white" />
+        <MaterialIcon icon="search" color="Icon/Inverted" />
       </div>
     </div>
   )