5 files changed, 43 insertions, 17 deletions
diff --git a/FrontEnd/src/views/common/alert/AlertHost.tsx b/FrontEnd/src/views/common/alert/AlertHost.tsx
index ba6d6a0f..92db78fa 100644
--- a/FrontEnd/src/views/common/alert/AlertHost.tsx
+++ b/FrontEnd/src/views/common/alert/AlertHost.tsx
@@ -6,6 +6,8 @@ import classNames from "classnames";
 import { alertService, AlertInfoEx, AlertInfo } from "@/services/alert";
 import { convertI18nText } from "@/common";
 
+import IconButton from "../button/IconButton";
+
 import "./alert.css";
 
 interface AutoCloseAlertProps {
@@ -67,8 +69,9 @@ export const AutoCloseAlert: React.FC<AutoCloseAlertProps> = (props) => {
         })()}
       </div>
       <div className="cru-alert-close-button-container">
-        <i
-          className={classNames("icon-button bi-x cru-alert-close-button")}
+        <IconButton
+          icon="x"
+          className="cru-alert-close-button"
           onClick={close}
         />
       </div>
diff --git a/FrontEnd/src/views/common/button/IconButton.css b/FrontEnd/src/views/common/button/IconButton.css
new file mode 100644
index 00000000..ef4dca00
--- /dev/null
+++ b/FrontEnd/src/views/common/button/IconButton.css
@@ -0,0 +1,9 @@
+.cru-icon-button {
+  color: var(--cru-theme-color);
+  font-size: 1.4rem;
+  cursor: pointer;
+}
+
+.cru-icon-button.large {
+  font-size: 1.6rem;
+}
diff --git a/FrontEnd/src/views/common/button/IconButton.tsx b/FrontEnd/src/views/common/button/IconButton.tsx
new file mode 100644
index 00000000..56c62588
--- /dev/null
+++ b/FrontEnd/src/views/common/button/IconButton.tsx
@@ -0,0 +1,25 @@
+import classNames from "classnames";
+import React from "react";
+
+export type IconButtonProps = {
+  icon: string;
+  color?: string;
+  large?: boolean;
+} & React.ComponentPropsWithRef<"i">;
+
+export default function IconButton(props: IconButtonProps): JSX.Element {
+  const { icon, color, className, large, ...otherProps } = props;
+
+  return (
+    <i
+      className={classNames(
+        "cru-icon-button",
+        large && "large",
+        "bi-" + icon,
+        color ? "cru-" + color : "cru-primary",
+        className
+      )}
+      {...otherProps}
+    />
+  );
+}
diff --git a/FrontEnd/src/views/common/dailog/FullPageDialog.tsx b/FrontEnd/src/views/common/dailog/FullPageDialog.tsx
index 3c7f9d0b..ef76f2f2 100644
--- a/FrontEnd/src/views/common/dailog/FullPageDialog.tsx
+++ b/FrontEnd/src/views/common/dailog/FullPageDialog.tsx
@@ -4,6 +4,7 @@ import classnames from "classnames";
 import { CSSTransition } from "react-transition-group";
 
 import "./FullPageDialog.css";
+import IconButton from "../button/IconButton";
 
 export interface FullPageDialogProps {
   show: boolean;
@@ -28,8 +29,9 @@ const FullPageDialog: React.FC<FullPageDialogProps> = ({
     >
       <div className="cru-full-page">
         <div className="cru-full-page-top-bar">
-          <i
-            className="icon-button bi-arrow-left ms-3 cru-full-page-back-button"
+          <IconButton
+            icon="arrow-left"
+            className="ms-3 cru-full-page-back-button"
             onClick={onBack}
           />
         </div>
diff --git a/FrontEnd/src/views/common/index.css b/FrontEnd/src/views/common/index.css
index 05fdce04..f6f14d2d 100644
--- a/FrontEnd/src/views/common/index.css
+++ b/FrontEnd/src/views/common/index.css
@@ -243,19 +243,6 @@
   height: 100%;
 }
 
-.icon-button {
-  font-size: 1.4rem;
-  cursor: pointer;
-}
-
-.icon-button.large {
-  font-size: 1.6rem;
-}
-
-.icon-button.primary-enhance {
-  color: var(--cru-primary-enhance-color);
-}
-
 .cru-avatar {
   width: 60px;
   height: 60px;