🪟 🧹 Use custom arrow icon in the new Streams Table

airbyte-webapp/src/components/connection/CatalogTree/next/CatalogTreeTableRow.tsx

@@ -1,9 +1,8 @@
-import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import classnames from "classnames";
 import React, { useMemo } from "react";
 import { FormattedMessage } from "react-intl";
 
+import { ArrowRightIcon } from "components/icons/ArrowRightIcon";
 import { Cell, Row } from "components/SimpleTableComponents";
 import { CheckBox } from "components/ui/CheckBox";
 import { Switch } from "components/ui/Switch";
@@ -119,7 +118,7 @@ export const CatalogTreeTableRow: React.FC<StreamHeaderProps> = ({
           />
         )}
       </Cell>
-      <FontAwesomeIcon icon={faArrowRight} className={styles.arrowCell} />
+      <ArrowRightIcon />
       <Cell flex={1} title={destNamespace}>
         <Text size="md" className={styles.cellText}>
           {destNamespace}

airbyte-webapp/src/components/connection/CatalogTree/next/StreamConnectionHeader.tsx

@@ -1,8 +1,7 @@
-import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import classnames from "classnames";
 import { FormattedMessage } from "react-intl";
 
+import { ArrowRightIcon } from "components/icons/ArrowRightIcon";
 import { Heading } from "components/ui/Heading";
 
 import { useConnectionFormService } from "hooks/services/ConnectionForm/ConnectionFormService";
@@ -31,7 +30,7 @@ export const StreamConnectionHeader: React.FC = () => {
         </Heading>
       </div>
       <div className={styles.arrowContainer}>
-        <FontAwesomeIcon icon={faArrowRight} />
+        <ArrowRightIcon />
       </div>
       <div className={destinationStyles}>
         {renderIcon(destinationDefinition.icon)}{" "}