Allow icons in Button component

[MAILPOET-2771]

assets/css/src/generic/_buttons.scss

@@ -12,6 +12,7 @@
   justify-content: center;
   line-height: 24px;
   max-width: 100%;
+  min-height: 40px;
   padding: 8px 20px;
   position: relative;
   text-align: center;
@@ -25,8 +26,22 @@
   }
 
   svg {
+    fill: currentColor;
     height: 16px;
     width: 16px;
+
+    &:first-child {
+      margin-right: 6px;
+    }
+
+    &:last-child {
+      margin-left: 6px;
+    }
+
+    &:only-child {
+      margin-left: 0;
+      margin-right: 0;
+    }
   }
 
   &.mailpoet-full-width + .mailpoet-button.mailpoet-full-width { margin-top: $grid-gap; }
@@ -36,10 +51,17 @@
 .mailpoet-button-small {
   font-size: $font-size - 2px;
   line-height: 20px;
+  min-height: 32px;
   padding: 6px 12px;
+
+  svg {
+    height: 12px;
+    width: 12px;
+  }
 }
 
 .mailpoet-button-large {
+  min-height: 48px;
   padding: 12px 24px;
 }
 

assets/js/src/common/button/button.tsx

@@ -2,11 +2,13 @@ import React from 'react';
 import classnames from 'classnames';
 
 type Props = {
-  children: React.ReactNode,
+  children?: React.ReactNode,
   size?: 'small' | 'large',
   variant?: 'light' | 'dark' | 'link' | 'link-dark',
   isLoading?: boolean,
   isFullWidth?: boolean,
+  iconStart?: JSX.Element,
+  iconEnd?: JSX.Element,
   onClick?: () => void,
   href?: string,
 };
@@ -17,6 +19,8 @@ const Button = ({
   variant,
   isLoading,
   isFullWidth,
+  iconStart,
+  iconEnd,
   onClick,
   href,
 }: Props) => (
@@ -35,7 +39,9 @@ const Button = ({
       )
     }
   >
-    <span>{children}</span>
+    {iconStart}
+    {children && <span>{children}</span>}
+    {iconEnd}
   </a>
 );