using fonticon instead of span

packages/web/src/widgets/DropDownButton.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import { FontIcon } from '../icons';
 import { showMenu } from '../modals/DropDownMenu';
 import InlineButton from './InlineButton';
 
@@ -12,7 +13,7 @@ export default function DropDownButton({ children }) {
 
   return (
     <InlineButton buttonRef={buttonRef} onClick={handleShowMenu} square>
-      <span className="mdi mdi-chevron-down" />
+      <FontIcon icon="mdi mdi-chevron-down" />
     </InlineButton>
   );
 }

packages/web/src/widgets/ErrorInfo.js

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import styled from 'styled-components';
+import { FontIcon } from '../icons';
 
 const Container = styled.div`
   display: flex;
@@ -22,7 +23,7 @@ export default function ErrorInfo({ message, icon = 'mdi mdi-close-circle color-
   if (isSmall) {
     return (
       <ContainerSmall>
-        <span className={icon} />
+        <FontIcon icon={icon} />
         {message}
       </ContainerSmall>
     );
@@ -30,7 +31,7 @@ export default function ErrorInfo({ message, icon = 'mdi mdi-close-circle color-
   return (
     <Container>
       <Icon>
-        <span className={icon} />
+        <FontIcon icon={icon} />
       </Icon>
       {message}
     </Container>

packages/web/src/widgets/LoadingInfo.js

@@ -1,6 +1,7 @@
 import React from 'react';
 
 import styled from 'styled-components';
+import { FontIcon } from '../icons';
 
 const Container = styled.div`
   display: flex;
@@ -33,7 +34,7 @@ export default function LoadingInfo({ message, wrapper = false }) {
   const core = (
     <Container>
       <Spinner>
-        <span className="mdi mdi-loading mdi-spin" />
+        <FontIcon icon="mdi mdi-loading mdi-spin" />
       </Spinner>
       {message}
     </Container>

packages/web/src/widgets/StatusBar.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import styled from 'styled-components';
+import { FontIcon } from '../icons';
 
 import { useCurrentDatabase } from '../utility/globalState';
 import { useDatabaseStatus } from '../utility/metadataLoaders';
@@ -24,18 +25,18 @@ export default function StatusBar() {
     <Container>
       {name && (
         <Item>
-          <span className="mdi mdi-database" /> {name}
+          <FontIcon icon="mdi mdi-database" /> {name}
         </Item>
       )}
       {(displayName || server) && (
         <Item>
-          <span className='mdi mdi-server'/> {displayName || server}
+          <FontIcon icon='mdi mdi-server'/> {displayName || server}
         </Item>
       )}
 
       {user && (
         <Item>
-          <span className="mdi mdi-account" /> {user}
+          <FontIcon icon="mdi mdi-account" /> {user}
         </Item>
       )}
 
@@ -43,17 +44,17 @@ export default function StatusBar() {
         <Item>
           {status.name == 'pending' && (
             <>
-              <span className="mdi mdi-loading mdi-spin" /> Loading
+              <FontIcon icon="mdi mdi-loading mdi-spin" /> Loading
             </>
           )}
           {status.name == 'ok' && (
             <>
-              <span className="mdi mdi-check-circle color-on-statusbar-green" /> Connected
+              <FontIcon icon="mdi mdi-check-circle color-on-statusbar-green" /> Connected
             </>
           )}
           {status.name == 'error' && (
             <>
-              <span className="mdi mdi-close-circle color-red" /> Error
+              <FontIcon icon="mdi mdi-close-circle color-red" /> Error
             </>
           )}
         </Item>
@@ -61,7 +62,7 @@ export default function StatusBar() {
       {!connection && (
         <Item>
           <>
-            <span className="mdi mdi-lan-disconnect" /> Not connected
+            <FontIcon icon="mdi mdi-lan-disconnect" /> Not connected
           </>
         </Item>
       )}

packages/web/src/widgets/ToolbarButton.js

@@ -1,6 +1,7 @@
 // @ts-nocheck
 import React from 'react';
 import styled from 'styled-components';
+import { FontIcon } from '../icons';
 import theme from '../theme';
 
 const ButtonDiv = styled.div`
@@ -53,7 +54,7 @@ export default function ToolbarButton({ children, onClick, icon = undefined, dis
       <ButtonDivInner patchY={patchY}>
         {icon && (
           <StyledIconSpan disabled={disabled}>
-            <span className={icon} />
+            <FontIcon icon={icon} />
           </StyledIconSpan>
         )}
         {children}

packages/web/src/widgets/WidgetIconPanel.js

@@ -2,6 +2,7 @@ import React from 'react';
 import theme from '../theme';
 import styled from 'styled-components';
 import { useCurrentWidget, useSetCurrentWidget } from '../utility/globalState';
+import { FontIcon } from '../icons';
 
 const IconWrapper = styled.div`
   color: ${theme.widgetMenu.iconFontColor};
@@ -62,7 +63,7 @@ export default function WidgetIconPanel() {
           onClick={() => setCurrentWidget(name === currentWidget ? null : name)}
           title={title}
         >
-          <span className={icon} />
+          <FontIcon icon={icon} />
         </IconWrapper>
       ))}
     </>