mdi icons

packages/web/src/widgets/Toolbar.js

@@ -87,19 +87,20 @@ export default function ToolBar({ toolbarPortalRef }) {
         </ToolbarButton>
       ))}
       {config.runAsPortal == false && (
-        <ToolbarButton onClick={modalState.open} icon="fas fa-database">
+        <ToolbarButton onClick={modalState.open} icon="mdi mdi-database-plus">
           Add connection
         </ToolbarButton>
       )}
-      <ToolbarButton onClick={newQuery} icon="fas fa-file-alt">
+      <ToolbarButton onClick={newQuery} icon="mdi mdi-file">
         New Query
       </ToolbarButton>
-      <ToolbarButton onClick={newFreeTable} icon="fas fa-table">
+      <ToolbarButton onClick={newFreeTable} icon="mdi mdi-table">
         Free table editor
       </ToolbarButton>
-      <ToolbarButton onClick={showImport} icon="fas fa-file-upload">
+      <ToolbarButton onClick={showImport} icon="mdi mdi-file-upload">
         Import data
       </ToolbarButton>
+
       <ToolbarContainer ref={toolbarPortalRef}></ToolbarContainer>
     </ToolbarContainer>
   );

packages/web/src/widgets/ToolbarButton.js

@@ -32,6 +32,7 @@ const ButtonDiv = styled.div`
 
 const StyledIconSpan = styled.span`
   margin-right: 5px;
+  // font-size: 18px;
   color: ${(props) => (props.disabled ? 'gray' : 'blue')};
 `;
 
@@ -42,7 +43,6 @@ const ButtonDivInner = styled.div`
 `;
 
 export default function ToolbarButton({ children, onClick, icon = undefined, disabled = undefined, patchY = 2 }) {
-  const Icon = icon;
   return (
     <ButtonDiv
       onClick={() => {
@@ -51,9 +51,9 @@ export default function ToolbarButton({ children, onClick, icon = undefined, dis
       disabled={disabled}
     >
       <ButtonDivInner patchY={patchY}>
-        {Icon && (
+        {icon && (
           <StyledIconSpan disabled={disabled}>
-            <i className={icon} />
+            <span className={icon} />
           </StyledIconSpan>
         )}
         {children}