Remove @ant-design/icons dependency

frontend/package.json

@@ -25,7 +25,6 @@
         "prepare": "npm run fetch-monaco"
     },
     "dependencies": {
-        "@ant-design/icons": "^4.7",
         "@chakra-ui/icons": "^2.1",
         "@chakra-ui/react": "^2.8.2",
         "@chakra-ui/react-use-disclosure": "^2.1",

frontend/src/components/layout/Footer.tsx

@@ -9,7 +9,7 @@
  * by the Apache License, Version 2.0
  */
 
-import { GithubFilled, LinkedinFilled, SlackSquareOutlined, TwitterOutlined } from '@ant-design/icons';
+import { FaGithub, FaLinkedin, FaSlack, FaTwitter } from 'react-icons/fa';
 import { isEmbedded } from '../../config';
 import env, { getBuildDate, IsCI, IsDev } from '../../utils/env';
 
@@ -43,7 +43,7 @@ export const VersionInfo = () => {
 export const AppFooter = () => {
     const gitHub = (link: string, title: string) => <>
         <a href={link} title={title} target="_blank" rel="noopener noreferrer">
-            <GithubFilled />
+            <FaGithub />
         </a>
     </>;
 
@@ -53,13 +53,13 @@ export const AppFooter = () => {
             {isEmbedded() ? gitHub('https://github.com/redpanda-data/redpanda', 'Visit Redpanda\'s GitHub repository') :
                 gitHub('https://github.com/redpanda-data/console', 'Visit Redpanda Console\'s GitHub repository')}
             <a href="https://redpanda.com/slack" title="Slack" target="_blank" rel="noopener noreferrer">
-                <SlackSquareOutlined />
+                <FaSlack />
             </a>
             <a href="https://twitter.com/redpandadata" title="Twitter" target="_blank" rel="noopener noreferrer">
-                <TwitterOutlined />
+                <FaTwitter />
             </a>
             <a href="https://www.linkedin.com/company/redpanda-data" title="LinkedIn" target="_blank" rel="noopener noreferrer">
-                <LinkedinFilled />
+                <FaLinkedin />
             </a>
         </div>
 

frontend/src/components/misc/ConfigList.tsx

@@ -9,7 +9,7 @@
  * by the Apache License, Version 2.0
  */
 
-import { EyeInvisibleTwoTone, InfoCircleFilled } from '@ant-design/icons';
+import { MdInfoOutline, MdOutlineVisibilityOff } from 'react-icons/md';
 import colors from '../../colors';
 import { ConfigEntry } from '../../state/restInterfaces';
 import { ValueDisplay } from '../../state/ui';
@@ -38,7 +38,9 @@ export function ConfigList({ configEntries, valueDisplay, renderTooltip }: { con
 
                 const sensitive = record.isSensitive && (
                     <Tooltip label="Value has been redacted because it's sensitive" placement="top" hasArrow>
-                        <EyeInvisibleTwoTone twoToneColor={colors.brandOrange}/>
+                        <Box>
+                            <MdOutlineVisibilityOff color={colors.brandOrange}/>
+                        </Box>
                     </Tooltip>
                 );
 
@@ -86,7 +88,9 @@ export function ConfigList({ configEntries, valueDisplay, renderTooltip }: { con
                     placement="left"
                     hasArrow
                 >
-                    <InfoCircleFilled />
+                    <Box>
+                        <MdInfoOutline size={12} />
+                    </Box>
                 </Tooltip>
             </span>
         ),

frontend/src/components/misc/ErrorBoundary.tsx

@@ -13,7 +13,7 @@ import React, { CSSProperties, FC } from 'react';
 import { observer } from 'mobx-react';
 import { makeObservable, observable } from 'mobx';
 import { toJson } from '../../utils/jsonUtils';
-import { CopyOutlined, CloseOutlined } from '@ant-design/icons';
+import { MdClose, MdOutlineCopyAll } from 'react-icons/md';
 import { envVarDebugAr } from '../../utils/env';
 import { NoClipboardPopover } from './NoClipboardPopover';
 import { isClipboardAvailable } from '../../utils/featureDetection';
@@ -180,7 +180,7 @@ export class ErrorBoundary extends React.Component<{ children?: React.ReactNode
                 <p>Please report this at <a style={{ textDecoration: 'underline', fontWeight: 'bold' }} href="https://github.com/redpanda-data/console/issues">our GitHub Repo</a></p>
                 <Box mt={0} mb={2}>
                     <Button variant="primary" size="large" style={{ width: '16rem' }} onClick={() => this.dismiss()}>
-                        <Icon as={CloseOutlined} />
+                        <Icon as={MdClose} />
                         Dismiss
                     </Button>
                     <NoClipboardPopover>
@@ -229,7 +229,7 @@ const CopyToClipboardButton: FC<{message: string, disabled: boolean; isLoading:
                     })
                 }).catch(navigatorClipboardErrorHandler)
             }}>
-            <Icon as={CopyOutlined}/>
+            <Icon as={MdOutlineCopyAll}/>
             Copy Info
         </Button>
     )

frontend/src/components/misc/login.tsx

@@ -14,7 +14,7 @@ import { observer } from 'mobx-react';
 import { makeObservable, observable } from 'mobx';
 import SvgLogo from '../../assets/logos/redpanda-text-color.svg';
 import { uiState } from '../../state/uiState';
-import { GoogleOutlined, GithubOutlined } from '@ant-design/icons';
+import { FaGithub, FaGoogle } from 'react-icons/fa';
 import OktaLogo from '../../utils/svg/OktaLogo';
 import { Box, Button,
   Flex, FormLabel, Input, Modal, ModalBody, ModalContent, ModalFooter, ModalHeader, ModalOverlay, Spinner, Stack, Text } from '@redpanda-data/ui';
@@ -24,8 +24,8 @@ import AzureADLogo from '../../utils/svg/AzureADLogo';
 
 
 const iconMap = new Map([
-    ['google', <GoogleOutlined key="google-icon" style={{ marginBottom: '6px' }} />],
-    ['github', <GithubOutlined key="github-icon" style={{ marginBottom: '6px' }} />],
+    ['google', <Box key="google-icon"><FaGoogle  style={{ marginBottom: '6px' }} /></Box>],
+    ['github', <Box key="github-icon"><FaGithub style={{ marginBottom: '6px' }} /></Box>],
     ['okta', <span key="okata-icon" style={{ display: 'inline-block', color: 'inherit', marginBottom: '6px', width: '20px', height: '20px', }}>{OktaLogo}</span>],
     ['azure ad', <span key="azure-ad-icon" style={{ display: 'inline-block', color: 'inherit', marginBottom: '6px', width: '20px', height: '20px', }}>{AzureADLogo}</span>]
 ]);

frontend/src/components/pages/acls/UserCreate.tsx

@@ -18,12 +18,12 @@ import { appGlobal } from '../../../state/appGlobal';
 import { DefaultSkeleton } from '../../../utils/tsxUtils';
 import Section from '../../misc/Section';
 import PageContent from '../../misc/PageContent';
-import { Alert, AlertIcon, Box, Button, Checkbox, CopyButton, createStandaloneToast, Flex, FormField, Grid, Heading, Input, isSingleValue, PasswordInput, redpandaTheme, redpandaToastOptions, Result, Select, Tag, TagCloseButton, TagLabel, Text, Tooltip } from '@redpanda-data/ui';
+import { Alert, AlertIcon, Box, Button, Checkbox, CopyButton, createStandaloneToast, Flex, FormField, Grid, Heading, IconButton, Input, isSingleValue, PasswordInput, redpandaTheme, redpandaToastOptions, Result, Select, Tag, TagCloseButton, TagLabel, Text, Tooltip } from '@redpanda-data/ui';
 import { useEffect, useMemo, useState } from 'react';
-import { ReloadOutlined } from '@ant-design/icons';
 import { SingleSelect } from '../../misc/Select';
 import { Features } from '../../../state/supportedFeatures';
 import { Link as ReactRouterLink } from 'react-router-dom';
+import { MdRefresh } from 'react-icons/md';
 
 const { ToastContainer, toast } = createStandaloneToast({
     theme: redpandaTheme,
@@ -208,19 +208,18 @@ const CreateUserModal = observer((p: {
                             />
 
                             <Tooltip label={'Generate new random password'} placement="top" hasArrow>
-                                <Button
+                                <IconButton
                                     onClick={() =>
                                     (state.password = generatePassword(
                                         30,
                                         state.generateWithSpecialChars
                                     ))
                                     }
                                     variant="ghost"
-                                    width="35px"
+                                    aria-label="Refresh"
+                                    icon={<MdRefresh size={16} />}
                                     display="inline-flex"
-                                >
-                                    <ReloadOutlined />
-                                </Button>
+                                />
                             </Tooltip>
                             <Tooltip label={'Copy password'} placement="top" hasArrow>
                                 <CopyButton content={state.password} variant="ghost" />

frontend/src/components/pages/admin/Admin.Users.tsx

@@ -16,10 +16,10 @@ import { api, } from '../../../state/backendApi';
 import { MotionDiv } from '../../../utils/animationProps';
 import '../../../utils/arrayExtensions';
 import { RoleComponent } from './Admin.Roles';
-import { UserOutlined } from '@ant-design/icons';
 import { makeObservable, observable } from 'mobx';
 import { DefaultSkeleton } from '../../../utils/tsxUtils';
-import { Accordion, Box, DataTable, SearchField, Tooltip } from '@redpanda-data/ui';
+import { Accordion, Box, Text, DataTable, Flex, SearchField, Tooltip } from '@redpanda-data/ui';
+import { MdOutlinePermIdentity } from 'react-icons/md';
 
 @observer
 export class AdminUsers extends Component<{}> {
@@ -56,12 +56,16 @@ export class AdminUsers extends Component<{}> {
                         cell: ({row}) => {
                             if (row.original.internalIdentifier == api.userData?.user.internalIdentifier) {
                                 return (
-                                    <span>
+                                    <Flex gap={2}>
                                         <Tooltip label="You are currently logged in as this user" placement="top" hasArrow>
-                                            <UserOutlined style={{fontSize: '16px', padding: '2px', color: '#ff9e3a'}}/>
+                                            <Box>
+                                                <MdOutlinePermIdentity size={16} color="#ff9e3a" />
+                                            </Box>
                                         </Tooltip>{' '}
-                                        {row.original.internalIdentifier}
-                                    </span>
+                                        <Text>
+                                            {row.original.internalIdentifier}
+                                        </Text>
+                                    </Flex>
                                 );
                             }
                             return row.original.internalIdentifier;

frontend/src/components/pages/connect/CreateConnector.tsx

@@ -12,7 +12,6 @@
 import React, { useEffect, useState } from 'react';
 import { comparer } from 'mobx';
 import { PageComponent, PageInitHelper } from '../Page';
-import { ApiOutlined, DatabaseOutlined, SearchOutlined } from '@ant-design/icons';
 import { Wizard, WizardStep } from '../../misc/Wizard';
 import { observer, useLocalObservable } from 'mobx-react';
 import { api } from '../../../state/backendApi';
@@ -284,7 +283,6 @@ const ConnectorWizard = observer(({ connectClusters, activeCluster }: ConnectorW
         {
             title: 'Connector Type',
             description: 'Choose type of connector.',
-            icon: <DatabaseOutlined />,
             content: (
                 <ConnectorType
                     connectClusters={connectClusters}
@@ -310,7 +308,6 @@ const ConnectorWizard = observer(({ connectClusters, activeCluster }: ConnectorW
         {
             title: 'Properties',
             description: 'Configure basic connection properties.',
-            icon: <ApiOutlined />,
             content: (
                 <>
                     <CreateConnectorHeading plugin={selectedPlugin} />
@@ -337,7 +334,6 @@ const ConnectorWizard = observer(({ connectClusters, activeCluster }: ConnectorW
         {
             title: 'Review',
             description: 'Review and optionally patch the created connector config.',
-            icon: <SearchOutlined />,
             content: selectedPlugin && (
                 <Review
                     connectorPlugin={selectedPlugin}

frontend/src/components/pages/connect/dynamic-ui/forms/SecretInput.tsx

@@ -1,4 +1,3 @@
-// import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons';
 import { EyeIcon, EyeOffIcon } from '@heroicons/react/outline';
 import { Icon, Button, Flex, Input, ButtonProps, Tooltip, useBoolean, InputGroup, InputRightElement } from '@redpanda-data/ui';
 import { observer, useLocalObservable } from 'mobx-react';