Added Iconify "Icon" web component for dynamic icons.

src/components/Rooms/room-item-card.tsx

@@ -1,11 +1,12 @@
 import { Separator } from "../ui/separator";
 import { Card, CardContent } from "../ui/card";
 import { Typography } from "../ui/typography";
-import { BedDouble, BedSingle, UserIcon } from "lucide-react";
+import { UserIcon } from "lucide-react";
 import { RoomCategory, RoomCategoryPhoto } from "@/model/RoomCategory";
 import { IconWithTooltip } from "../ui/icon-number-tooltip";
 import roomImg from "@/res/SomniaRoomImage.svg";
 import { cn } from "@/lib/utils";
+import { Icon } from "@iconify-icon/react";
 
 interface RoomItemCardProps {
   room: RoomCategory;
@@ -40,8 +41,7 @@ export function RoomItemCard({
           tooltipText={e.bedTypeName}
           label={e.amount.toString()}
         >
-          {e.bedTypeIcon.includes("bed-single") ? <BedSingle></BedSingle> : <BedDouble></BedDouble> }
-
+          <Icon icon={e.bedTypeIcon} height="auto" />
         </IconWithTooltip>
       </div>
     );

src/routes/Root.css

@@ -14,3 +14,9 @@ html {
   padding: 2rem;
   text-align: center;
 }
+
+iconify-icon {
+  display: inline-block;
+  min-width: 1em;
+  min-height: 1em;
+}