icon names refactor

packages/web/src/TabsPanel.js

@@ -78,7 +78,7 @@ const FileNameWrapper = styled.span`
   margin-left: 5px;
 `;
 
-const CloseButton = styled.span`
+const CloseButton = styled(FontIcon)`
   margin-left: 5px;
   color: gray;
   &:hover {
@@ -265,10 +265,11 @@ export default function TabsPanel() {
                 onMouseUp={(e) => handleMouseUp(e, tab.tabid)}
                 onContextMenu={(e) => handleContextMenu(e, tab.tabid, tab.props)}
               >
-                {<FontIcon icon={tab.busy ? 'mdi mdi-loading mdi-spin' : tab.icon} />}
+                {<FontIcon icon={tab.busy ? 'icon loading' : tab.icon} />}
                 <FileNameWrapper>{tab.title}</FileNameWrapper>
                 <CloseButton
-                  className="mdi mdi-close tabCloseButton"
+                  icon="icon close"
+                  className="tabCloseButton"
                   onClick={(e) => {
                     e.preventDefault();
                     closeTab(tab.tabid);

packages/web/src/appobj/AppObjects.js

@@ -68,7 +68,7 @@ export function AppObjectCore({
       {...other}
     >
       {prefix}
-      <IconWrap>{isBusy ? <FontIcon icon="mdi mdi-loading mdi-spin" /> : <FontIcon icon={icon} />}</IconWrap>
+      <IconWrap>{isBusy ? <FontIcon icon="icon loading" /> : <FontIcon icon={icon} />}</IconWrap>
       {title}
       {statusIcon && (
         <StatusIconWrap>

packages/web/src/appobj/MacroAppObject.js

@@ -3,7 +3,7 @@ import { filterName } from '@dbgate/datalib';
 
 const macroAppObject = () => ({ name, type, title, group }, { setOpenedTabs }) => {
   const key = name;
-  const icon = 'mdi mdi-hammer-wrench';
+  const icon = 'img macro';
   const matcher = (filter) => filterName(filter, name, title);
   const groupTitle = group;
 

packages/web/src/appobj/archiveFileAppObject.js

@@ -6,12 +6,10 @@ import { openNewTab } from '../utility/common';
 import { filterName } from '@dbgate/datalib';
 import axios from '../utility/axios';
 
-const archiveTableIcon = 'mdi mdi-table color-yellow-icon';
-
 function openArchive(setOpenedTabs, fileName, folderName) {
   openNewTab(setOpenedTabs, {
     title: fileName,
-    icon: archiveTableIcon,
+    icon: 'img archive',
     tooltip: `${folderName}\n${fileName}`,
     tabComponent: 'ArchiveFileTab',
     props: {
@@ -34,7 +32,7 @@ function Menu({ data, setOpenedTabs }) {
 
     openNewTab(setOpenedTabs, {
       title: data.fileName,
-      icon: archiveTableIcon,
+      icon: 'img archive',
       tabComponent: 'FreeTableTab',
       props: {
         initialData: {
@@ -61,7 +59,7 @@ function Menu({ data, setOpenedTabs }) {
 
 const archiveFileAppObject = () => ({ fileName, folderName }, { setOpenedTabs }) => {
   const key = fileName;
-  const icon = archiveTableIcon;
+  const icon = 'img archive';
   const onClick = () => {
     openArchive(setOpenedTabs, fileName, folderName);
   };

packages/web/src/appobj/archiveFolderAppObject.js

@@ -18,7 +18,7 @@ function Menu({ data, setOpenedTabs }) {
 
 const archiveFolderAppObject = () => ({ name }, { setOpenedTabs, currentArchive }) => {
   const key = name;
-  const icon = 'mdi mdi-database-outline color-green-icon';
+  const icon = 'img archive-folder';
   const isBold = name == currentArchive;
   const matcher = (filter) => filterName(filter, name);
 

packages/web/src/appobj/columnAppObject.js

@@ -1,7 +1,7 @@
 /** @param columnProps {import('@dbgate/types').ColumnInfo} */
 function getColumnIcon(columnProps) {
-  if (columnProps.autoIncrement) return 'mdi mdi-numeric-1-box-multiple-outline';
+  if (columnProps.autoIncrement) return 'img autoincrement';
-  return 'mdi mdi-table-column';
+  return 'img column';
 }
 
 /** @param columnProps {import('@dbgate/types').ColumnInfo} */

packages/web/src/appobj/connectionAppObject.js

@@ -61,7 +61,7 @@ const connectionAppObject = (flags) => (
   const title = displayName || server;
   const key = _id;
   const isExpandable = openedConnections.includes(_id);
-  const icon = 'mdi mdi-server color-blue-icon';
+  const icon = 'img server';
   const matcher = (filter) => filterName(filter, displayName, server);
   const { boldCurrentDatabase } = flags || {};
   const isBold = boldCurrentDatabase
@@ -74,10 +74,10 @@ const connectionAppObject = (flags) => (
   let statusIcon = null;
   let statusTitle = null;
   if (openedConnections.includes(_id)) {
-    if (!status) statusIcon = 'mdi mdi-loading mdi-spin';
+    if (!status) statusIcon = 'icon loading';
-    else if (status.name == 'pending') statusIcon = 'mdi mdi-loading mdi-spin';
+    else if (status.name == 'pending') statusIcon = 'icon loading';
-    else if (status.name == 'ok') statusIcon = 'mdi mdi-check-circle color-green';
+    else if (status.name == 'ok') statusIcon = 'img green-ok';
-    else statusIcon = 'mdi mdi-close-circle color-red';
+    else statusIcon = 'img red-error';
     if (status && status.name == 'error') {
       statusTitle = status.message;
     }

packages/web/src/appobj/constraintAppObject.js

@@ -1,7 +1,7 @@
 /** @param props {import('@dbgate/types').ConstraintInfo} */
 function getConstraintIcon(props) {
-  if (props.constraintType == 'primaryKey') return 'mdi mdi-key-star color-yellow-icon';
+  if (props.constraintType == 'primaryKey') return 'img primary-key';
-  if (props.constraintType == 'foreignKey') return 'mdi mdi-key-link';
+  if (props.constraintType == 'foreignKey') return 'img foreign-key';
   return null;
 }
 

packages/web/src/appobj/databaseAppObject.js

@@ -11,7 +11,7 @@ function Menu({ data, setOpenedTabs, showModal }) {
   const handleNewQuery = () => {
     openNewTab(setOpenedTabs, {
       title: 'Query',
-      icon: 'mdi mdi-file',
+      icon: 'img sql-file',
       tooltip,
       tabComponent: 'QueryTab',
       props: {
@@ -62,7 +62,7 @@ const databaseAppObject = (flags) => ({ name, connection }) => {
   const { boldCurrentDatabase } = flags || {};
   const title = name;
   const key = name;
-  const icon = 'mdi mdi-database color-yellow-icon';
+  const icon = 'img database';
   const isBold = boldCurrentDatabase
     ? ({ currentDatabase }) => {
         return (

packages/web/src/appobj/databaseObjectAppObject.js

@@ -8,10 +8,10 @@ import { filterName } from '@dbgate/datalib';
 import ImportExportModal from '../modals/ImportExportModal';
 
 const icons = {
-  tables: 'mdi mdi-table color-blue-icon',
+  tables: 'img table',
-  views: 'mdi mdi-table color-magenta-icon',
+  views: 'img view',
-  procedures: 'mdi mdi-cog color-blue-icon',
+  procedures: 'img procedure',
-  functions: 'mdi mdi-function-variant',
+  functions: 'img function',
 };
 
 const menus = {
@@ -101,7 +101,7 @@ export async function openDatabaseObjectDetail(
   openNewTab(setOpenedTabs, {
     title: pureName,
     tooltip,
-    icon: sqlTemplate ? 'mdi mdi-file' : icons[objectTypeField],
+    icon: sqlTemplate ? 'img sql-file' : icons[objectTypeField],
     tabComponent: sqlTemplate ? 'QueryTab' : tabComponent,
     props: {
       schemaName,
@@ -138,7 +138,7 @@ function Menu({ data, makeAppObj, setOpenedTabs, showModal }) {
               const coninfo = await getConnectionInfo(data);
               openNewTab(setOpenedTabs, {
                 title: data.pureName,
-                icon: 'mdi mdi-table color-green-icon',
+                icon: 'img free-table',
                 tabComponent: 'FreeTableTab',
                 props: {
                   initialData: {

packages/web/src/appobj/savedSqlFileAppObject.js

@@ -16,7 +16,7 @@ function Menu({ data, setSavedSqlFiles }) {
 const savedSqlFileAppObject = () => ({ name, storageKey }, { setOpenedTabs, newQuery, openedTabs }) => {
   const key = storageKey;
   const title = name;
-  const icon = 'mdi mdi-file';
+  const icon = 'img sql-file';
 
   const onClick = () => {
     const existing = openedTabs.find((x) => x.props && x.props.storageKey == storageKey);

packages/web/src/datagrid/ColumnHeaderControl.js

@@ -86,12 +86,12 @@ export default function ColumnHeaderControl({
         <ColumnLabel {...column} />
         {order == 'ASC' && (
           <IconWrapper>
-            <FontIcon icon="mdi mdi-sort-alphabetical-ascending color-green" />
+            <FontIcon icon="img sort-asc" />
           </IconWrapper>
         )}
         {order == 'DESC' && (
           <IconWrapper>
-            <FontIcon icon="mdi mdi-sort-alphabetical-descending color-green" />
+            <FontIcon icon="img sort-desc" />
           </IconWrapper>
         )}
       </LabelDiv>

packages/web/src/datagrid/ColumnLabel.js

@@ -12,8 +12,8 @@ const Label = styled.span`
 /** @param column {import('@dbgate/datalib').DisplayColumn|import('@dbgate/types').ColumnInfo} */
 export default function ColumnLabel(column) {
   let icon = null;
-  if (column.autoIncrement) icon = 'mdi mdi-numeric-1-box-multiple-outline';
+  if (column.autoIncrement) icon = 'img autoincrement';
-  if (column.foreignKey) icon = 'mdi mdi-key-link';
+  if (column.foreignKey) icon = 'img foreign-key';
   return (
     <Label {...column}>
       {icon ? <FontIcon icon={icon} /> : null} {column.headerText || column.columnName}

packages/web/src/datagrid/DataFilterControl.js

@@ -292,7 +292,7 @@ export default function DataFilterControl({
         autocomplete="off"
       />
       <InlineButton buttonRef={buttonRef} onClick={handleShowMenu} square>
-        <FontIcon icon="mdi mdi-filter" />
+        <FontIcon icon="icon filter" />
       </InlineButton>
     </FilterDiv>
   );

packages/web/src/datagrid/DataGridCore.js

@@ -322,7 +322,7 @@ export default function DataGridCore(props) {
     const rows = getSelectedRowData().map((row) => _.pickBy(row, (v, col) => columns.find((x) => x.columnName == col)));
     openNewTab(setOpenedTabs, {
       title: 'selection',
-      icon: 'mdi mdi-table color-green-icon',
+      icon: 'img free-table',
       tabComponent: 'FreeTableTab',
       props: {
         initialData: {
@@ -972,7 +972,7 @@ export default function DataGridCore(props) {
               >
                 {filterCount > 0 && (
                   <InlineButton onClick={handleClearFilters} square>
-                    <FontIcon icon="mdi mdi-filter-off" />
+                    <FontIcon icon="icon filter-off" />
                   </InlineButton>
                 )}
               </TableHeaderCell>

packages/web/src/datagrid/DataGridToolbar.js

@@ -4,19 +4,19 @@ import ToolbarButton from '../widgets/ToolbarButton';
 export default function DataGridToolbar({ reload, grider, save }) {
   return (
     <>
-      <ToolbarButton onClick={reload} icon="mdi mdi-reload">
+      <ToolbarButton onClick={reload} icon="icon reload">
         Refresh
       </ToolbarButton>
-      <ToolbarButton disabled={!grider.canUndo} onClick={() => grider.undo()} icon="mdi mdi-undo">
+      <ToolbarButton disabled={!grider.canUndo} onClick={() => grider.undo()} icon="icon undo">
         Undo
       </ToolbarButton>
-      <ToolbarButton disabled={!grider.canRedo} onClick={() => grider.redo()} icon="mdi mdi-redo">
+      <ToolbarButton disabled={!grider.canRedo} onClick={() => grider.redo()} icon="icon redo">
         Redo
       </ToolbarButton>
-      <ToolbarButton disabled={!grider.allowSave} onClick={save} icon="mdi mdi-save">
+      <ToolbarButton disabled={!grider.allowSave} onClick={save} icon="icon save">
         Save
       </ToolbarButton>
-      <ToolbarButton disabled={!grider.containsChanges} onClick={() => grider.revertAllChanges()} icon="mdi mdi-close">
+      <ToolbarButton disabled={!grider.containsChanges} onClick={() => grider.revertAllChanges()} icon="icon close">
         Revert
       </ToolbarButton>
     </>

packages/web/src/datagrid/ReferenceHeader.js

@@ -30,13 +30,13 @@ export default function ReferenceHeader({ reference, onClose }) {
   return (
     <Container>
       <Header>
-        <FontIcon icon="mdi mdi-link-box" />
+        <FontIcon icon="img reference" />
         <HeaderText>
           {reference.pureName} [{reference.columns.map((x) => x.refName).join(', ')}] = master [
           {reference.columns.map((x) => x.baseName).join(', ')}]
         </HeaderText>
       </Header>
-      <ToolbarButton icon="mdi mdi-close" onClick={onClose} patchY={6}>
+      <ToolbarButton icon="icon close" onClick={onClose} patchY={6}>
         Close
       </ToolbarButton>
     </Container>

packages/web/src/datagrid/ReferenceManager.js

@@ -64,7 +64,7 @@ export default function ReferenceManager(props) {
               .map((fk) => (
                 <ManagerRow
                   key={fk.constraintName}
-                  icon="mdi mdi-link"
+                  icon="img link"
                   tableName={fk.refTableName}
                   columns={fk.columns}
                   onClick={() =>
@@ -89,7 +89,7 @@ export default function ReferenceManager(props) {
               .map((fk) => (
                 <ManagerRow
                   key={fk.constraintName}
-                  icon="mdi mdi-link-box"
+                  icon="img reference"
                   tableName={fk.pureName}
                   columns={fk.columns}
                   onClick={() =>

packages/web/src/datagrid/SqlDataGridCore.js

@@ -83,7 +83,7 @@ export default function SqlDataGridCore(props) {
   function openQuery() {
     openNewTab(setOpenedTabs, {
       title: 'Query',
-      icon: 'mdi mdi-file',
+      icon: 'img sql-file',
       tabComponent: 'QueryTab',
       props: {
         initialScript: display.getExportQuery(),

packages/web/src/freetable/FreeTableColumnEditor.js

@@ -2,6 +2,7 @@ import _ from 'lodash';
 import React from 'react';
 import styled from 'styled-components';
 import { ManagerInnerContainer } from '../datagrid/ManagerStyles';
+import { FontIcon } from '../icons';
 import keycodes from '../utility/keycodes';
 
 const Row = styled.div`
@@ -22,7 +23,7 @@ const Name = styled.div`
 const Buttons = styled.div`
   white-space: nowrap;
 `;
-const Icon = styled.span`
+const Icon = styled(FontIcon)`
   // margin-left: 5px;
   position: relative;
   top: 5px;
@@ -100,10 +101,10 @@ function ColumnManagerRow({ column, onEdit, onRemove, onUp, onDown }) {
     <Row onMouseEnter={() => setIsHover(true)} onMouseLeave={() => setIsHover(false)}>
       <Name>{column.columnName}</Name>
       <Buttons>
-        <Icon className="mdi mdi-pencil" onClick={onEdit} />
+        <Icon icon="icon edit" onClick={onEdit} />
-        <Icon className="mdi mdi-delete" onClick={onRemove} />
+        <Icon icon="icon delete" onClick={onRemove} />
-        <Icon className="mdi mdi-arrow-up" onClick={onUp} />
+        <Icon icon="icon arrow-up" onClick={onUp} />
-        <Icon className="mdi mdi-arrow-down" onClick={onDown} />
+        <Icon icon="icon arrow-down" onClick={onDown} />
       </Buttons>
     </Row>
   );

packages/web/src/freetable/MacroDetail.js

@@ -63,14 +63,14 @@ function MacroHeader({ selectedMacro, setSelectedMacro, onExecute }) {
   return (
     <Container>
       <Header>
-        <FontIcon icon="mdi mdi-hammer-wrench" />
+        <FontIcon icon="img macro" />
         <HeaderText>{selectedMacro.title}</HeaderText>
       </Header>
       <Buttons>
-        <ToolbarButton icon="mdi mdi-play" onClick={onExecute} patchY={6}>
+        <ToolbarButton icon="icon run" onClick={onExecute} patchY={6}>
           Execute
         </ToolbarButton>
-        <ToolbarButton icon="mdi mdi-close" onClick={() => setSelectedMacro(null)} patchY={6}>
+        <ToolbarButton icon="icon close" onClick={() => setSelectedMacro(null)} patchY={6}>
           Close
         </ToolbarButton>
       </Buttons>

packages/web/src/freetable/useNewFreeTable.js

@@ -8,7 +8,7 @@ export default function useNewFreeTable() {
   return ({ title = undefined, ...props } = {}) =>
     openNewTab(setOpenedTabs, {
       title: title || 'Table',
-      icon: 'mdi mdi-table color-green-icon',
+      icon: 'img free-table',
       tabComponent: 'FreeTableTab',
       props,
     });

packages/web/src/icons.js

@@ -6,16 +6,73 @@ const iconNames = {
   'icon plus-box': 'mdi mdi-plus-box-outline',
   'icon invisible-box': 'mdi mdi-minus-box-outline icon-invisible',
   'icon cloud-upload': 'mdi mdi-cloud-upload',
+  'icon import': 'mdi mdi-file-upload',
+  'icon new-connection': 'mdi mdi-database-plus',
 
   'icon database': 'mdi mdi-database',
+  'icon server': 'mdi mdi-server',
+  'icon table': 'mdi mdi-table',
   'icon archive': 'mdi mdi-archive',
   'icon file': 'mdi mdi-file',
+  'icon loading': 'mdi mdi-loading mdi-spin',
+  'icon close': 'mdi mdi-close',
+  'icon filter': 'mdi mdi-filter',
+  'icon filter-off': 'mdi mdi-filter-off',
+  'icon reload': 'mdi mdi-reload',
+  'icon undo': 'mdi mdi-undo',
+  'icon redo': 'mdi mdi-redo',
+  'icon save': 'mdi mdi-content-save',
+  'icon account': 'mdi mdi-account',
+  'icon sql-file': 'mdi mdi-file',
+
+  'icon edit': 'mdi mdi-pencil',
+  'icon delete': 'mdi mdi-delete',
+  'icon arrow-up': 'mdi mdi-arrow-up',
+  'icon arrow-down': 'mdi mdi-arrow-down',
+  'icon arrow-left': 'mdi mdi-arrow-left',
+  'icon arrow-right': 'mdi mdi-arrow-right',
+  'icon format-code': 'mdi mdi-code-tags-check',
+  'icon show-wizard': 'mdi mdi-comment-edit',
+  'icon disconnected': 'mdi mdi-lan-disconnect',
+
+  'icon run': 'mdi mdi-play',
+  'icon chevron-down': 'mdi mdi-chevron-down',
+
+  'img green-ok': 'mdi mdi-check-circle color-green',
+  'img alert': 'mdi mdi-alert-circle color-blue',
+  'img red-error': 'mdi mdi-close-circle color-red',
+  'img statusbar-ok': 'mdi mdi-check-circle color-on-statusbar-green',
+
+  'img archive': 'mdi mdi-table color-yellow-icon',
+  'img archive-folder': 'mdi mdi-database-outline color-green-icon',
+  'img autoincrement': 'mdi mdi-numeric-1-box-multiple-outline',
+  'img column': 'mdi mdi-table-column',
+  'img server': 'mdi mdi-server color-blue-icon',
+  'img primary-key': 'mdi mdi-key-star color-yellow-icon',
+  'img foreign-key': 'mdi mdi-key-link',
+  'img sql-file': 'mdi mdi-file',
+  'img shell': 'mdi mdi-flash color-blue-icon',
+
+  'img free-table': 'mdi mdi-table color-green-icon',
+  'img macro': 'mdi mdi-hammer-wrench',
+
+  'img database': 'mdi mdi-database color-yellow-icon',
+  'img table': 'mdi mdi-table color-blue-icon',
+  'img view': 'mdi mdi-table color-magenta-icon',
+  'img procedure': 'mdi mdi-cog color-blue-icon',
+  'img function': 'mdi mdi-function-variant',
+
+  'img sort-asc': 'mdi mdi-sort-alphabetical-ascending color-green',
+  'img sort-desc': 'mdi mdi-sort-alphabetical-descending color-green',
+
+  'img reference': 'mdi mdi-link-box',
+  'img link': 'mdi mdi-link',
 };
 
 export function FontIcon({ icon, className = '', ...other }) {
   if (!icon) return null;
   let cls = icon;
-  if (icon.startsWith('icon ')) {
+  if (icon.startsWith('icon ') || icon.startsWith('img ')) {
     cls = iconNames[icon];
     if (!cls) return null;
   }

packages/web/src/impexp/ImportExportConfigurator.js

@@ -295,7 +295,7 @@ function SourceName({ name }) {
     <SourceNameWrapper>
       <div>{name}</div>
       <TrashWrapper onClick={handleDelete}>
-        <FontIcon icon="mdi mdi-delete" />
+        <FontIcon icon="icon delete" />
       </TrashWrapper>
     </SourceNameWrapper>
   );
@@ -353,7 +353,7 @@ export default function ImportExportConfigurator({ uploadedFile = undefined }) {
           engine={sourceEngine}
         />
         <ArrowWrapper>
-          <FontIcon icon="mdi mdi-arrow-right" />
+          <FontIcon icon="icon arrow-right" />
         </ArrowWrapper>
         <SourceTargetConfig
           direction="target"

packages/web/src/modals/ErrorMessageModal.js

@@ -24,7 +24,7 @@ export default function ErrorMessageModal({ modalState, title = 'Error', message
       <ModalContent>
         <Wrapper>
           <IconWrapper>
-            <FontIcon icon="mdi mdi-close-circle color-red" />
+            <FontIcon icon="img red-error" />
           </IconWrapper>
           {message}
         </Wrapper>

packages/web/src/modals/ImportExportModal.js

@@ -90,7 +90,7 @@ function GenerateSctriptButton({ modalState }) {
     const code = await createImpExpScript(values);
     openNewTab(setOpenedTabs, {
       title: 'Shell',
-      icon: 'mdi mdi-flash color-blue-icon',
+      icon: 'img shell',
       tabComponent: 'ShellTab',
       props: {
         initialScript: code,

packages/web/src/modals/ModalHeader.js

@@ -24,7 +24,7 @@ export default function ModalHeader({ children, modalState }) {
     <Wrapper>
       <div>{children}</div>
       <CloseWrapper onClick={modalState.close}>
-        <FontIcon icon="mdi mdi-close" />
+        <FontIcon icon="icon close" />
       </CloseWrapper>
     </Wrapper>
   );

packages/web/src/query/QueryToolbar.js

@@ -4,19 +4,19 @@ import ToolbarButton from '../widgets/ToolbarButton';
 export default function QueryToolbar({ execute, cancel, isDatabaseDefined, busy, save, format, isConnected, kill }) {
   return (
     <>
-      <ToolbarButton disabled={!isDatabaseDefined || busy} onClick={execute} icon="mdi mdi-play">
+      <ToolbarButton disabled={!isDatabaseDefined || busy} onClick={execute} icon="icon run">
         Execute
       </ToolbarButton>
-      <ToolbarButton disabled={!busy} onClick={cancel} icon="mdi mdi-close">
+      <ToolbarButton disabled={!busy} onClick={cancel} icon="icon close">
         Cancel
       </ToolbarButton>
-      <ToolbarButton disabled={!isConnected} onClick={kill} icon="mdi mdi-close">
+      <ToolbarButton disabled={!isConnected} onClick={kill} icon="icon close">
         Kill
       </ToolbarButton>
-      <ToolbarButton onClick={save} icon="mdi mdi-save">
+      <ToolbarButton onClick={save} icon="icon save">
         Save
       </ToolbarButton>
-      <ToolbarButton onClick={format} icon="mdi mdi-code-tags-check">
+      <ToolbarButton onClick={format} icon="icon format-code">
         Format
       </ToolbarButton>
     </>

packages/web/src/query/ShellToolbar.js

@@ -4,13 +4,13 @@ import ToolbarButton from '../widgets/ToolbarButton';
 export default function ShellToolbar({ execute, cancel, busy, edit, editAvailable }) {
   return (
     <>
-      <ToolbarButton disabled={busy} onClick={execute} icon="mdi mdi-play">
+      <ToolbarButton disabled={busy} onClick={execute} icon="icon run">
         Execute
       </ToolbarButton>
-      <ToolbarButton disabled={!busy} onClick={cancel} icon="mdi mdi-close">
+      <ToolbarButton disabled={!busy} onClick={cancel} icon="icon close">
         Cancel
       </ToolbarButton>
-      <ToolbarButton disabled={!editAvailable} onClick={edit} icon="mdi mdi-comment-edit">
+      <ToolbarButton disabled={!editAvailable} onClick={edit} icon="icon show-wizard">
         Show wizard
       </ToolbarButton>
     </>

packages/web/src/query/useNewQuery.js

@@ -14,7 +14,7 @@ export default function useNewQuery() {
   return ({ title = undefined, ...props } = {}) =>
     openNewTab(setOpenedTabs, {
       title: title || 'Query',
-      icon: 'mdi mdi-file',
+      icon: 'img sql-file',
       tooltip,
       tabComponent: 'QueryTab',
       props: {

packages/web/src/widgets/DatabaseWidget.js

@@ -126,7 +126,7 @@ function SqlObjectListWrapper() {
   const db = useCurrentDatabase();
 
   if (!db) {
-    return <ErrorInfo message="Database not selected" icon="mdi mdi-alert-circle color-blue" />;
+    return <ErrorInfo message="Database not selected" icon="img alert" />;
   }
   const { name, connection } = db;
 

packages/web/src/widgets/DropDownButton.js

@@ -13,7 +13,7 @@ export default function DropDownButton({ children }) {
 
   return (
     <InlineButton buttonRef={buttonRef} onClick={handleShowMenu} square>
-      <FontIcon icon="mdi mdi-chevron-down" />
+      <FontIcon icon="icon chevron-down" />
     </InlineButton>
   );
 }

packages/web/src/widgets/ErrorInfo.js

@@ -19,7 +19,7 @@ const ContainerSmall = styled.div`
   margin-right: 10px;
 `;
 
-export default function ErrorInfo({ message, icon = 'mdi mdi-close-circle color-red', isSmall = false }) {
+export default function ErrorInfo({ message, icon = 'img red-error', isSmall = false }) {
   if (isSmall) {
     return (
       <ContainerSmall>

packages/web/src/widgets/LoadingInfo.js

@@ -34,7 +34,7 @@ export default function LoadingInfo({ message, wrapper = false }) {
   const core = (
     <Container>
       <Spinner>
-        <FontIcon icon="mdi mdi-loading mdi-spin" />
+        <FontIcon icon="icon loading" />
       </Spinner>
       {message}
     </Container>

packages/web/src/widgets/StatusBar.js

@@ -25,18 +25,18 @@ export default function StatusBar() {
     <Container>
       {name && (
         <Item>
-          <FontIcon icon="mdi mdi-database" /> {name}
+          <FontIcon icon="icon database" /> {name}
         </Item>
       )}
       {(displayName || server) && (
         <Item>
-          <FontIcon icon='mdi mdi-server'/> {displayName || server}
+          <FontIcon icon="icon server" /> {displayName || server}
         </Item>
       )}
 
       {user && (
         <Item>
-          <FontIcon icon="mdi mdi-account" /> {user}
+          <FontIcon icon="icon account" /> {user}
         </Item>
       )}
 
@@ -44,17 +44,17 @@ export default function StatusBar() {
         <Item>
           {status.name == 'pending' && (
             <>
-              <FontIcon icon="mdi mdi-loading mdi-spin" /> Loading
+              <FontIcon icon="icon loading" /> Loading
             </>
           )}
           {status.name == 'ok' && (
             <>
-              <FontIcon icon="mdi mdi-check-circle color-on-statusbar-green" /> Connected
+              <FontIcon icon="img statusbar-ok" /> Connected
             </>
           )}
           {status.name == 'error' && (
             <>
-              <FontIcon icon="mdi mdi-close-circle color-red" /> Error
+              <FontIcon icon="img red-error" /> Error
             </>
           )}
         </Item>
@@ -62,7 +62,7 @@ export default function StatusBar() {
       {!connection && (
         <Item>
           <>
-            <FontIcon icon="mdi mdi-lan-disconnect" /> Not connected
+            <FontIcon icon="icon disconnected" /> Not connected
           </>
         </Item>
       )}

packages/web/src/widgets/Toolbar.js

@@ -87,17 +87,17 @@ export default function ToolBar({ toolbarPortalRef }) {
         </ToolbarButton>
       ))}
       {config.runAsPortal == false && (
-        <ToolbarButton onClick={modalState.open} icon="mdi mdi-database-plus">
+        <ToolbarButton onClick={modalState.open} icon="icon new-connection">
           Add connection
         </ToolbarButton>
       )}
-      <ToolbarButton onClick={newQuery} icon="mdi mdi-file">
+      <ToolbarButton onClick={newQuery} icon="icon sql-file">
         New Query
       </ToolbarButton>
-      <ToolbarButton onClick={newFreeTable} icon="mdi mdi-table">
+      <ToolbarButton onClick={newFreeTable} icon="icon table">
         Free table editor
       </ToolbarButton>
-      <ToolbarButton onClick={showImport} icon="mdi mdi-file-upload">
+      <ToolbarButton onClick={showImport} icon="icon import">
         Import data
       </ToolbarButton>
 

packages/web/src/widgets/WidgetIconPanel.js

@@ -22,7 +22,7 @@ const IconWrapper = styled.div`
 export default function WidgetIconPanel() {
   const widgets = [
     {
-      icon: 'mdi mdi-database',
+      icon: 'icon database',
       name: 'database',
       title: 'Database connections',
     },
@@ -31,12 +31,12 @@ export default function WidgetIconPanel() {
     //   name: 'table',
     // },
     {
-      icon: 'mdi mdi-file',
+      icon: 'icon file',
       name: 'file',
       title: 'Closed tabs & Saved SQL files',
     },
     {
-      icon: 'mdi mdi-archive',
+      icon: 'icon archive',
       name: 'archive',
       title: 'Archive (saved tabular data)',
     },