heroicons cannot be rendered in Safari

[Frankjunyulin]

If you use Safari to go to our website:https://www.dearai.online/Landing You can see the heroicons does not render (in the bottom right corner):

/Landing

But in Chrome, it looks like:

Following are our related code:

import React, {useState} from "react";
import CSS from "csstype";
import ChatWidgetComponent from "./ChatWidgetComponent";
import {
  ChatBubbleBottomCenterTextIcon,
  XMarkIcon,
} from "@heroicons/react/24/outline";

type Props = {
  userKey: String;
};
export default function ChatWidget({userKey}: Props) {
  const [isOpen, setIsOpen] = useState<Boolean>(false);

  return (
    <div style={container}>
      {
        <div
          style={{
            ...chatWidgetStyle,
            visibility: isOpen ? "visible" : "hidden",
          }}
        >
          <ChatWidgetComponent userKey={userKey} setIsOpen={setIsOpen} />
        </div>
      }
      <button
        type="button"
        style={fab}
        onClick={() => {
          setIsOpen(!isOpen);
        }}
      >
        {isOpen ? (
          <XMarkIcon className="text-white bg-blue-400 rounded-full p-3" />
        ) : (
          <ChatBubbleBottomCenterTextIcon className="text-white bg-blue-400 rounded-full p-3" />
        )}
      </button>
    </div>
  );
}

const fab: CSS.Properties = {
  display: "flex",
  margin: 0,
  padding: 0,
  position: "fixed",
  height: "4em",
  width: "4em",
  right: "1em",
  bottom: "1em",
  borderRadius: "100%",
};

const container: CSS.Properties = {
  zIndex: 2147483646,
};

export const chatWidgetStyle: CSS.Properties = {
  display: "flex",
  margin: 0,
  padding: 0,
  position: "fixed",
  height: "45em",
  width: "25em",
  right: "1em",
  bottom: "5em",
  maxHeight: "80%",
  maxWidth: "30%",
  zIndex: 2147483646,
};