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

@@ -1,6 +1,7 @@
 import { useIntl } from "react-intl"
 
-import { ErrorCircleIcon } from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import styles from "./noPriceAvailable.module.css"
@@ -11,7 +12,7 @@ export default function NoPriceAvailableCard() {
     <div className={styles.priceCard}>
       <div className={styles.noRooms}>
         <div>
-          <ErrorCircleIcon color="red" />
+          <MaterialIcon icon="error" color="Icon/Interactive/Accent" />
         </div>
         <Caption color="uiTextHighContrast">
           {intl.formatMessage({

apps/scandic-web/components/HotelReservation/HotelCard/index.tsx

@@ -4,12 +4,12 @@ import { useParams } from "next/dist/client/components/navigation"
 import { memo, useCallback } from "react"
 import { useIntl } from "react-intl"
 
+import { HotelLogo, MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import { selectRate } from "@/constants/routes/hotelReservation"
 import { useHotelsMapStore } from "@/stores/hotels-map"
 
-import { mapFacilityToIcon } from "@/components/ContentType/HotelPage/data"
-import { PriceTagIcon } from "@/components/Icons"
-import HotelLogo from "@/components/Icons/Logos"
+import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
 import ImageGallery from "@/components/ImageGallery"
 import Button from "@/components/TempDesignSystem/Button"
 import Divider from "@/components/TempDesignSystem/Divider"
@@ -135,10 +135,12 @@ function HotelCard({
           </Body>
           <div className={styles.facilities}>
             {amenities.map((facility) => {
-              const IconComponent = mapFacilityToIcon(facility.id)
+              const Icon = (
+                <FacilityToIcon id={facility.id} color="Icon/Default" />
+              )
               return (
                 <div className={styles.facilitiesItem} key={facility.id}>
-                  {IconComponent && <IconComponent color="grey80" />}
+                  {Icon && Icon}
                   <Caption color="uiTextMediumContrast">
                     {facility.name}
                   </Caption>
@@ -162,7 +164,7 @@ function HotelCard({
                 <span className={`${fullPrice ? styles.strikedText : ""}`}>
                   <IconChip
                     color="blue"
-                    icon={<PriceTagIcon height={20} width={20} />}
+                    icon={<MaterialIcon icon="sell" size={20} />}
                   >
                     {bookingCode}
                   </IconChip>