Icons passed to Button component must be wrapped in a div for proper styling (#22176)

- Added property notation for Rotate Icon to support className attribute

Author: Mark Berger

airbyte-webapp/src/components/icons/RotateIcon.tsx

@@ -4,10 +4,11 @@ interface Props {
   color?: string;
   width?: string;
   height?: string;
+  className?: string;
 }
 
-export const RotateIcon = ({ color = theme.greyColor20, width = "20", height = "20" }: Props) => (
-  <svg width={width} height={height} viewBox="0 0 20 20" fill="none">
+export const RotateIcon = ({ color = theme.greyColor20, width = "20", height = "20", className }: Props) => (
+  <svg className={className} width={width} height={height} viewBox="0 0 20 20" fill="none">
     <path
       d="M3.463 2.433C5.27756 0.860661 7.59899 -0.0033494 10 1.65915e-07C15.523 1.65915e-07 20 4.477 20 10C20 12.136 19.33 14.116 18.19 15.74L15 10H18C18.0001 8.43162 17.5392 6.8978 16.6747 5.58926C15.8101 4.28071 14.5799 3.25516 13.1372 2.64012C11.6944 2.02509 10.1027 1.8477 8.55996 2.13002C7.0172 2.41233 5.59145 3.1419 4.46 4.228L3.463 2.433ZM16.537 17.567C14.7224 19.1393 12.401 20.0033 10 20C4.477 20 0 15.523 0 10C0 7.864 0.67 5.884 1.81 4.26L5 10H2C1.99987 11.5684 2.46075 13.1022 3.32534 14.4107C4.18992 15.7193 5.42007 16.7448 6.86282 17.3599C8.30557 17.9749 9.89729 18.1523 11.44 17.87C12.9828 17.5877 14.4085 16.8581 15.54 15.772L16.537 17.567Z"
       fill={color}

airbyte-webapp/src/pages/connections/ConnectionStatusPage/ConnectionStatusPage.module.scss

@@ -21,14 +21,6 @@
   .resetButton {
     margin-right: variables.$spacing-md;
   }
-
-  .syncButton {
-    .iconRotate {
-      display: flex;
-      margin-right: 12px;
-      align-items: center;
-    }
-  }
 }
 
 .footer {

airbyte-webapp/src/pages/connections/ConnectionStatusPage/ConnectionStatusPage.tsx

@@ -173,11 +173,7 @@ export const ConnectionStatusPage: React.FC = () => {
                       className={styles.syncButton}
                       disabled={!allowSync}
                       onClick={onSyncNowButtonClick}
-                      icon={
-                        <div className={styles.iconRotate}>
-                          <RotateIcon height={styles.syncIconHeight} width={styles.syncIconHeight} />
-                        </div>
-                      }
+                      icon={<RotateIcon height={styles.syncIconHeight} width={styles.syncIconHeight} />}
                     >
                       <FormattedMessage id="connection.startSync" />
                     </Button>