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/TempDesignSystem/Form/PasswordInput/index.tsx

@@ -5,13 +5,8 @@ import { Text, TextField } from "react-aria-components"
 import { Controller, useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
-import {
-  CheckIcon,
-  CloseIcon,
-  EyeHideIcon,
-  EyeShowIcon,
-  InfoCircleIcon,
-} from "@/components/Icons"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
+
 import Button from "@/components/TempDesignSystem/Button"
 import AriaInputWithLabel from "@/components/TempDesignSystem/Form/Input/AriaInputWithLabel"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
@@ -95,7 +90,11 @@ export default function PasswordInput({
                   aria-controls={field.name}
                   className={styles.toggleButton}
                 >
-                  {isPasswordVisible ? <EyeHideIcon /> : <EyeShowIcon />}
+                  {isPasswordVisible ? (
+                    <MaterialIcon icon="visibility_off" />
+                  ) : (
+                    <MaterialIcon icon="visibility" />
+                  )}
                 </Button>
               ) : null}
             </div>
@@ -107,13 +106,13 @@ export default function PasswordInput({
             {isNewPassword ? (
               !field.value && fieldState.error ? (
                 <Caption className={styles.error} fontOnly>
-                  <InfoCircleIcon color="red" />
+                  <MaterialIcon icon="info" color="Icon/Feedback/Error" />
                   {fieldState.error.message}
                 </Caption>
               ) : null
             ) : fieldState.error ? (
               <Caption className={styles.error} fontOnly>
-                <InfoCircleIcon color="red" />
+                <MaterialIcon icon="info" color="Icon/Feedback/Error" />
                 {fieldState.error &&
                   intl.formatMessage({ id: fieldState.error.message })}
               </Caption>
@@ -127,9 +126,9 @@ export default function PasswordInput({
 
 function Icon({ errorMessage, errors }: IconProps) {
   return errors.includes(errorMessage) ? (
-    <CloseIcon color="red" height={20} width={20} />
+    <MaterialIcon icon="close" color="Icon/Interactive/Accent" size={20} />
   ) : (
-    <CheckIcon color="green" height={20} width={20} />
+    <MaterialIcon icon="check" color="Icon/Feedback/Success" size={20} />
   )
 }