feat[headerComponent]: Add api icon on header

src/frontend/src/components/genericIconComponent/index.tsx

@@ -9,7 +9,7 @@ const ForwardedIconComponent = forwardRef(
       <TargetIcon
         strokeWidth={1.5}
         className={className}
-        style={{ color: iconColor }}
+        style={iconColor ? { color: iconColor } : {}}
         ref={ref}
       />
     );

src/frontend/src/components/headerComponent/index.tsx

@@ -146,6 +146,12 @@ export default function Header() {
               />
             </div>
           </AlertDropdown>
+          <button>
+            <IconComponent
+              name="Key"
+              className="side-bar-button-size text-muted-foreground hover:text-accent-foreground"
+            />
+          </button>
         </div>
       </div>
     </div>

src/frontend/src/utils/styleUtils.ts

@@ -72,6 +72,7 @@ import {
   X,
   XCircle,
   Zap,
+  Key
 } from "lucide-react";
 import { FaApple, FaGithub } from "react-icons/fa";
 import { AirbyteIcon } from "../icons/Airbyte";
@@ -294,5 +295,6 @@ export const nodeIconsLucide = {
   FaApple,
   EyeOff,
   Eye,
-  UserCog2
+  UserCog2,
+  Key,
 };