font icons instead of SVG icons

packages/web/src/appobj/AppObjectList.js

@@ -10,9 +10,9 @@ const SubItemsDiv = styled.div`
 `;
 
 const ExpandIconHolder2 = styled.span`
-  margin-right: 5px;
-  position: relative;
-  top: -3px;
+  margin-right: 3px;
+  // position: relative;
+  // top: -3px;
 `;
 
 const ExpandIconHolder = styled.span`
@@ -71,11 +71,7 @@ function AppObjectListItem({ makeAppObj, data, filter, appobj, onObjectClick, Su
       prefix={
         SubItems ? (
           <ExpandIconHolder2>
-            {appobj.isExpandable ? (
-              <ExpandIcon isSelected={isHover} isExpanded={isExpanded} />
-            ) : (
-              <ExpandIcon isSelected={isHover} isBlank blankColor="#ccc" />
-            )}
+            {appobj.isExpandable ? <ExpandIcon isExpanded={isExpanded} /> : <ExpandIcon isBlank />}
           </ExpandIconHolder2>
         ) : null
       }
@@ -105,7 +101,7 @@ function AppObjectGroup({ group, items }) {
         onClick={() => setIsExpanded(!isExpanded)}
       >
         <ExpandIconHolder>
-          <ExpandIcon isSelected={isHover} isExpanded={isExpanded} />
+          <ExpandIcon isExpanded={isExpanded} />
         </ExpandIconHolder>
         {group} {items && `(${items.filter((x) => x.component).length})`}
       </GroupDiv>

packages/web/src/appobj/AppObjects.js

@@ -5,7 +5,6 @@ import React from 'react';
 import styled from 'styled-components';
 import { showMenu } from '../modals/DropDownMenu';
 import { useSetOpenedTabs, useAppObjectParams } from '../utility/globalState';
-import { FontIcon } from '../icons';
 
 const AppObjectDiv = styled.div`
   padding: 5px;
@@ -23,7 +22,7 @@ const AppObjectSpan = styled.span`
 `;
 
 const IconWrap = styled.span`
-  margin-right: 10px;
+  margin-right: 5px;
 `;
 
 const StatusIconWrap = styled.span`
@@ -32,7 +31,7 @@ const StatusIconWrap = styled.span`
 
 export function AppObjectCore({
   title,
-  Icon,
+  icon,
   Menu,
   data,
   makeAppObj,
@@ -68,7 +67,7 @@ export function AppObjectCore({
       {...other}
     >
       {prefix}
-      <IconWrap>{isBusy ? <span className="mdi mdi-loading mdi-spin"></span> : <Icon />}</IconWrap>
+      <IconWrap>{isBusy ? <span className="mdi mdi-loading mdi-spin"></span> : <span className={icon} />}</IconWrap>
       {title}
       {statusIcon && (
         <StatusIconWrap>

packages/web/src/appobj/connectionAppObject.js

@@ -1,13 +1,10 @@
 import _ from 'lodash';
 import React from 'react';
-import { getEngineIcon } from '../icons';
 import { DropDownMenuItem } from '../modals/DropDownMenu';
-import useShowModal from '../modals/showModal';
 import ConnectionModal from '../modals/ConnectionModal';
 import axios from '../utility/axios';
 import { filterName } from '@dbgate/datalib';
 import ConfirmModal from '../modals/ConfirmModal';
-import { useConfig } from '../utility/metadataLoaders';
 import CreateDatabaseModal from '../modals/CreateDatabaseModal';
 
 function Menu({ data, setOpenedConnections, openedConnections, config, showModal }) {
@@ -64,7 +61,7 @@ const connectionAppObject = (flags) => (
   const title = displayName || server;
   const key = _id;
   const isExpandable = openedConnections.includes(_id);
-  const Icon = getEngineIcon(engine);
+  const icon = 'mdi mdi-server color-blue-icon';
   const matcher = (filter) => filterName(filter, displayName, server);
   const { boldCurrentDatabase } = flags || {};
   const isBold = boldCurrentDatabase
@@ -89,7 +86,7 @@ const connectionAppObject = (flags) => (
   return {
     title,
     key,
-    Icon,
+    icon,
     Menu,
     matcher,
     isBold,

packages/web/src/appobj/databaseAppObject.js

@@ -12,7 +12,7 @@ function Menu({ data, setOpenedTabs, showModal }) {
   const handleNewQuery = () => {
     openNewTab(setOpenedTabs, {
       title: 'Query',
-      icon: 'sql.svg',
+      icon: 'mdi mdi-file',
       tooltip,
       tabComponent: 'QueryTab',
       props: {
@@ -63,7 +63,7 @@ const databaseAppObject = (flags) => ({ name, connection }) => {
   const { boldCurrentDatabase } = flags || {};
   const title = name;
   const key = name;
-  const Icon = DatabaseIcon;
+  const icon = 'mdi mdi-database color-yellow-icon';
   const isBold = boldCurrentDatabase
     ? ({ currentDatabase }) => {
         return (
@@ -72,7 +72,7 @@ const databaseAppObject = (flags) => ({ name, connection }) => {
       }
     : null;
 
-  return { title, key, Icon, Menu, isBold };
+  return { title, key, icon, Menu, isBold };
 };
 
 export default databaseAppObject;

packages/web/src/appobj/databaseObjectAppObject.js

@@ -9,10 +9,10 @@ import { filterName } from '@dbgate/datalib';
 import ImportExportModal from '../modals/ImportExportModal';
 
 const icons = {
-  tables: 'table2.svg',
-  views: 'view2.svg',
-  procedures: 'procedure2.svg',
-  functions: 'function.svg',
+  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',
 };
 
 const menus = {
@@ -173,7 +173,8 @@ const databaseObjectAppObject = () => (
 ) => {
   const title = schemaName ? `${schemaName}.${pureName}` : pureName;
   const key = title;
-  const Icon = (props) => getIconImage(icons[objectTypeField], props);
+  const icon = icons[objectTypeField];
+  // const Icon = (props) => getIconImage(icons[objectTypeField], props);
   const onClick = ({ schemaName, pureName }) => {
     openDatabaseObjectDetail(
       setOpenedTabs,
@@ -191,7 +192,7 @@ const databaseObjectAppObject = () => (
   const matcher = (filter) => filterName(filter, pureName);
   const groupTitle = _.startCase(objectTypeField);
 
-  return { title, key, Icon, Menu, onClick, matcher, groupTitle };
+  return { title, key, icon, Menu, onClick, matcher, groupTitle };
 };
 
 export default databaseObjectAppObject;