Merged in feat/svg-instead-of-fonts (pull request #3411)

feat(SW-3695): use svg icons instead of font icons

* feat(icons): use svg instead of font icons

* feat(icons): use webpack/svgr for inlined svgs. Now support for isFilled again

* Merge master

* Remove old font icon


Approved-by: Joakim Jäderberg

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/ValidationError/index.tsx

@@ -11,11 +11,7 @@ export default function ValidationError() {
   return (
     <div className={styles.container}>
       <Caption className={styles.title} color="red" type="bold">
-        <MaterialIcon
-          icon="error_circle_rounded"
-          color="Icon/Feedback/Error"
-          size={20}
-        />
+        <MaterialIcon icon="dangerous" color="Icon/Feedback/Error" size={20} />
         {intl.formatMessage({
           id: "bookingWidget.validationError.destination",
           defaultMessage: "Enter destination or hotel",

packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/utils.ts

@@ -1,11 +1,11 @@
 import { RoomPackageCodeEnum } from "@scandic-hotels/trpc/enums/roomFilter"
 
-import type { MaterialSymbolProps } from "@scandic-hotels/design-system/Icons/MaterialIcon/MaterialSymbol"
+import type { MaterialIconProps } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import type { PackageEnum } from "@scandic-hotels/trpc/types/packages"
 
 export function getIconNameByPackageCode(
   packageCode: PackageEnum
-): MaterialSymbolProps["icon"] {
+): MaterialIconProps["icon"] {
   switch (packageCode) {
     case RoomPackageCodeEnum.PET_ROOM:
       return "pets"

packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/RoomNotAvailable/index.tsx

@@ -11,11 +11,7 @@ export default function RoomNotAvailable() {
   return (
     <div className={styles.noRoomsContainer}>
       <div className={styles.noRooms}>
-        <MaterialIcon
-          icon="error_circle_rounded"
-          color="Icon/Feedback/Error"
-          size={16}
-        />
+        <MaterialIcon icon="dangerous" color="Icon/Feedback/Error" size={16} />
         <Caption color="uiTextHighContrast" type="bold">
           {intl.formatMessage({
             id: "selectRate.thisRoomIsNotAvailable",