icon names refactor

2026-04-19 22:26:01 +00:00 · 2020-11-10 18:21:29 +01:00
parent 1c2dedfef3
commit c8f7dc3d2c
37 changed files with 146 additions and 89 deletions
--- a/packages/web/src/TabsPanel.js
+++ b/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);
--- a/packages/web/src/appobj/AppObjects.js
+++ b/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>
--- a/packages/web/src/appobj/MacroAppObject.js
+++ b/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;

--- a/packages/web/src/appobj/archiveFileAppObject.js
+++ b/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);
  };
--- a/packages/web/src/appobj/archiveFolderAppObject.js
+++ b/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);

--- a/packages/web/src/appobj/columnAppObject.js
+++ b/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';
-  return 'mdi mdi-table-column';
+  if (columnProps.autoIncrement) return 'img autoincrement';
+  return 'img column';
 }

 /** @param columnProps {import('@dbgate/types').ColumnInfo} */
--- a/packages/web/src/appobj/connectionAppObject.js
+++ b/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';
-    else if (status.name == 'pending') statusIcon = 'mdi mdi-loading mdi-spin';
-    else if (status.name == 'ok') statusIcon = 'mdi mdi-check-circle color-green';
-    else statusIcon = 'mdi mdi-close-circle color-red';
+    if (!status) statusIcon = 'icon loading';
+    else if (status.name == 'pending') statusIcon = 'icon loading';
+    else if (status.name == 'ok') statusIcon = 'img green-ok';
+    else statusIcon = 'img red-error';
    if (status && status.name == 'error') {
      statusTitle = status.message;
    }
--- a/packages/web/src/appobj/constraintAppObject.js
+++ b/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 == 'foreignKey') return 'mdi mdi-key-link';
+  if (props.constraintType == 'primaryKey') return 'img primary-key';
+  if (props.constraintType == 'foreignKey') return 'img foreign-key';
  return null;
 }

--- a/packages/web/src/appobj/databaseAppObject.js
+++ b/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 (
--- a/packages/web/src/appobj/databaseObjectAppObject.js
+++ b/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',
-  views: 'mdi mdi-table color-magenta-icon',
-  procedures: 'mdi mdi-cog color-blue-icon',
-  functions: 'mdi mdi-function-variant',
+  tables: 'img table',
+  views: 'img view',
+  procedures: 'img procedure',
+  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: {
--- a/packages/web/src/appobj/savedSqlFileAppObject.js
+++ b/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);
--- a/packages/web/src/datagrid/ColumnHeaderControl.js
+++ b/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>
--- a/packages/web/src/datagrid/ColumnLabel.js
+++ b/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.foreignKey) icon = 'mdi mdi-key-link';
+  if (column.autoIncrement) icon = 'img autoincrement';
+  if (column.foreignKey) icon = 'img foreign-key';
  return (
    <Label {...column}>
      {icon ? <FontIcon icon={icon} /> : null} {column.headerText || column.columnName}
--- a/packages/web/src/datagrid/DataFilterControl.js
+++ b/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>
  );
--- a/packages/web/src/datagrid/DataGridCore.js
+++ b/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>
--- a/packages/web/src/datagrid/DataGridToolbar.js
+++ b/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>
    </>
--- a/packages/web/src/datagrid/ReferenceHeader.js
+++ b/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>
--- a/packages/web/src/datagrid/ReferenceManager.js
+++ b/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={() =>
--- a/packages/web/src/datagrid/SqlDataGridCore.js
+++ b/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(),
--- a/packages/web/src/freetable/FreeTableColumnEditor.js
+++ b/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,9 +23,9 @@ const Name = styled.div`
 const Buttons = styled.div`
  white-space: nowrap;
 `;
-const Icon = styled.span`
+const Icon = styled(FontIcon)`
  // margin-left: 5px;
-  position: relative; 
+  position: relative;
  top: 5px;
  &:hover {
    background-color: gray;
@@ -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 className="mdi mdi-delete" onClick={onRemove} />
-        <Icon className="mdi mdi-arrow-up" onClick={onUp} />
-        <Icon className="mdi mdi-arrow-down" onClick={onDown} />
+        <Icon icon="icon edit" onClick={onEdit} />
+        <Icon icon="icon delete" onClick={onRemove} />
+        <Icon icon="icon arrow-up" onClick={onUp} />
+        <Icon icon="icon arrow-down" onClick={onDown} />
      </Buttons>
    </Row>
  );
--- a/packages/web/src/freetable/MacroDetail.js
+++ b/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>
--- a/packages/web/src/freetable/useNewFreeTable.js
+++ b/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,
    });
--- a/packages/web/src/icons.js
+++ b/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;
  }
--- a/packages/web/src/impexp/ImportExportConfigurator.js
+++ b/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"
--- a/packages/web/src/modals/ErrorMessageModal.js
+++ b/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>
--- a/packages/web/src/modals/ImportExportModal.js
+++ b/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,
--- a/packages/web/src/modals/ModalHeader.js
+++ b/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>
  );
--- a/packages/web/src/query/QueryToolbar.js
+++ b/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>
    </>
--- a/packages/web/src/query/ShellToolbar.js
+++ b/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>
    </>
--- a/packages/web/src/query/useNewQuery.js
+++ b/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: {
--- a/packages/web/src/widgets/DatabaseWidget.js
+++ b/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;

--- a/packages/web/src/widgets/DropDownButton.js
+++ b/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>
  );
 }
--- a/packages/web/src/widgets/ErrorInfo.js
+++ b/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>
--- a/packages/web/src/widgets/LoadingInfo.js
+++ b/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>
--- a/packages/web/src/widgets/StatusBar.js
+++ b/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>
      )}
--- a/packages/web/src/widgets/Toolbar.js
+++ b/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>

--- a/packages/web/src/widgets/WidgetIconPanel.js
+++ b/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)',
    },