From 67afff2baf0b6e5a3d4aa198117d163ff8bd85ad Mon Sep 17 00:00:00 2001
From: Dexter <dexter.edwards93@gmail.com>
Date: Mon, 20 Mar 2023 12:23:39 +0000
Subject: [PATCH] feat: allow any icons for buttons

---
 .../consensus-validators-table.tsx             |  9 +++++++--
 .../src/components/button/button.tsx           | 18 ++++++------------
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/apps/governance/src/routes/staking/home/validator-tables/consensus-validators-table.tsx b/apps/governance/src/routes/staking/home/validator-tables/consensus-validators-table.tsx
index 635e02926..ed6caebfc 100644
--- a/apps/governance/src/routes/staking/home/validator-tables/consensus-validators-table.tsx
+++ b/apps/governance/src/routes/staking/home/validator-tables/consensus-validators-table.tsx
@@ -2,7 +2,7 @@ import type { Dispatch, SetStateAction } from 'react';
 import { forwardRef, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
-import { Button } from '@vegaprotocol/ui-toolkit';
+import { Button, Icon } from '@vegaprotocol/ui-toolkit';
 import { AgGridDynamic as AgGrid } from '@vegaprotocol/datagrid';
 import { useAppState } from '../../../../contexts/app-state/app-state-context';
 import { BigNumber } from '../../../../lib/bignumber';
@@ -87,7 +87,12 @@ const TopThirdCellRenderer = (
         <div className="mb-4">
           <Button
             data-testid="show-all-validators"
-            rightIcon="arrow-right"
+            rightIcon={
+              <Icon
+                name="arrow-right"
+                className="fill-current mr-2 align-text-top"
+              />
+            }
             className="inline-flex items-center"
           >
             {t('Reveal top validators')}
diff --git a/libs/ui-toolkit/src/components/button/button.tsx b/libs/ui-toolkit/src/components/button/button.tsx
index fb5d7e49f..ba78fe557 100644
--- a/libs/ui-toolkit/src/components/button/button.tsx
+++ b/libs/ui-toolkit/src/components/button/button.tsx
@@ -4,8 +4,6 @@ import type {
   ReactNode,
 } from 'react';
 import { forwardRef } from 'react';
-import type { IconName } from '../icon';
-import { Icon } from '../icon';
 import classnames from 'classnames';
 
 export type ButtonVariant = 'default' | 'primary' | 'secondary' | 'ternary';
@@ -76,8 +74,8 @@ interface CommonProps {
   disabled?: boolean;
   fill?: boolean;
   size?: ButtonSize;
-  icon?: IconName;
-  rightIcon?: IconName;
+  icon?: ReactNode;
+  rightIcon?: ReactNode;
 }
 export interface ButtonProps
   extends ButtonHTMLAttributes<HTMLButtonElement>,
@@ -151,17 +149,13 @@ export const ButtonLink = forwardRef<HTMLButtonElement, ButtonLinkProps>(
 
 interface ButtonContentProps {
   children: ReactNode;
-  icon?: IconName;
-  rightIcon?: IconName;
+  icon?: ReactNode;
+  rightIcon?: ReactNode;
 }
 
 const ButtonContent = ({ children, icon, rightIcon }: ButtonContentProps) => {
-  const iconEl = icon ? (
-    <Icon name={icon} className="fill-current mr-2 align-text-top" />
-  ) : null;
-  const rightIconEl = rightIcon ? (
-    <Icon name={rightIcon} className="fill-current ml-2 align-text-top" />
-  ) : null;
+  const iconEl = icon ? icon : null;
+  const rightIconEl = rightIcon ? rightIcon : null;
 
   return (
     <>