Replace SVGs with icons, restructure the table for CRUD operations across the project, standardize the application's display, and build a new template for the table's action buttons.

src/Components/role/archive/ArchivedRolesModal.tsx

@@ -11,18 +11,7 @@ interface ArchivedRolesModalProps {
 }
 
 const searchIcon = (
-  <svg
-    width="16"
-    height="16"
-    viewBox="0 0 24 24"
-    fill="none"
-    stroke="currentColor"
-    strokeWidth="2"
-    aria-hidden="true"
-  >
-    <circle cx="11" cy="11" r="8" />
-    <path d="m21 21-4.35-4.35" />
-  </svg>
+  <i className="ti ti-search" style={{ fontSize: 16 }} aria-hidden="true" />
 );
 
 export function ArchivedRolesModal({ onClose }: ArchivedRolesModalProps) {