Replace icons with codicons

examples/api-samples/src/browser/view/sample-unclosable-view-contribution.ts

@@ -18,12 +18,12 @@ import { inject, injectable, interfaces } from '@theia/core/shared/inversify';
 import { AbstractViewContribution, bindViewContribution } from '@theia/core/lib/browser/shell/view-contribution';
 import { TabBarToolbarContribution, TabBarToolbarRegistry } from '@theia/core/lib/browser/shell/tab-bar-toolbar';
 import { Command, CommandRegistry, MessageService } from '@theia/core/lib/common';
-import { Widget, WidgetFactory } from '@theia/core/lib/browser';
+import { codicon, Widget, WidgetFactory } from '@theia/core/lib/browser';
 import { SampleViewUnclosableView } from './sample-unclosable-view';
 
 export const SampleToolBarCommand: Command = {
     id: 'sample.toggle.toolbarCommand',
-    iconClass: 'theia-add-icon'
+    iconClass: codicon('add')
 };
 
 @injectable()

examples/api-samples/src/browser/view/sample-unclosable-view.tsx

@@ -14,7 +14,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
-import { ReactWidget } from '@theia/core/lib/browser';
+import { codicon, ReactWidget } from '@theia/core/lib/browser';
 import { injectable, postConstruct } from '@theia/core/shared/inversify';
 import * as React from '@theia/core/shared/react';
 
@@ -30,7 +30,7 @@ export class SampleViewUnclosableView extends ReactWidget {
     this.id = SampleViewUnclosableView.ID;
     this.title.caption = 'Sample Unclosable View';
     this.title.label = 'Sample Unclosable View';
-    this.title.iconClass = 'fa fa-window-maximize';
+    this.title.iconClass = codicon('window');
     this.title.closable = false;
     this.update();
   }

packages/bulk-edit/src/browser/bulk-edit-commands.ts

@@ -14,6 +14,7 @@
  * SPDX-License-Identifier: EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0
  ********************************************************************************/
 
+import { codicon } from '@theia/core/lib/browser';
 import { Command } from '@theia/core/lib/common';
 
 export namespace BulkEditCommands {
@@ -23,11 +24,11 @@ export namespace BulkEditCommands {
 
     export const APPLY: Command = {
         id: 'bulk-edit:apply',
-        iconClass: 'codicon codicon-check'
+        iconClass: codicon('check')
     };
 
     export const DISCARD: Command = {
         id: 'bulk-edit:discard',
-        iconClass: 'clear-all'
+        iconClass: codicon('clear-all')
     };
 }

packages/callhierarchy/src/browser/callhierarchy-tree/callhierarchy-tree-widget.tsx

@@ -17,7 +17,7 @@
 import { injectable, inject } from '@theia/core/shared/inversify';
 import {
     ContextMenuRenderer, TreeWidget, NodeProps, TreeProps, TreeNode,
-    TreeModel, DockPanel
+    TreeModel, DockPanel, codicon
 } from '@theia/core/lib/browser';
 import { LabelProvider } from '@theia/core/lib/browser/label-provider';
 import { DefinitionNode, CallerNode } from './callhierarchy-tree';
@@ -47,7 +47,7 @@ export class CallHierarchyTreeWidget extends TreeWidget {
         this.id = CALLHIERARCHY_ID;
         this.title.label = 'Call Hierarchy';
         this.title.caption = 'Call Hierarchy';
-        this.title.iconClass = 'fa call-hierarchy-tab-icon';
+        this.title.iconClass = codicon('references');
         this.title.closable = true;
         this.addClass(HIERARCHY_TREE_CLASS);
         this.toDispose.push(this.model.onSelectionChanged(selection => {

packages/callhierarchy/src/browser/style/index.css

@@ -51,10 +51,6 @@
     color: var(--theia-descriptionForeground);
 }
 
-.call-hierarchy-tab-icon::before {
-    content: "\f0ab"
-}
-
 .theia-CallHierarchyTree .definitionNode-content {
     white-space: nowrap;
     overflow: hidden;

packages/core/src/browser/dialogs.ts

@@ -17,7 +17,7 @@
 import { injectable, inject } from 'inversify';
 import { Disposable, MaybePromise, CancellationTokenSource } from '../common';
 import { Key } from './keyboard/keys';
-import { Widget, BaseWidget, Message, addKeyListener } from './widgets';
+import { Widget, BaseWidget, Message, addKeyListener, codiconArray } from './widgets';
 import { FrontendApplicationContribution } from './frontend-application';
 
 @injectable()
@@ -168,8 +168,7 @@ export abstract class AbstractDialog<T> extends BaseWidget {
         titleContentNode.appendChild(this.titleNode);
 
         this.closeCrossNode = document.createElement('i');
-        this.closeCrossNode.classList.add('fa');
-        this.closeCrossNode.classList.add('fa-times');
+        this.closeCrossNode.classList.add(...codiconArray('close'));
         this.closeCrossNode.classList.add('closeButton');
         titleContentNode.appendChild(this.closeCrossNode);
 

packages/core/src/browser/diff-uris.ts

@@ -17,6 +17,7 @@
 import { injectable, inject } from 'inversify';
 import URI from '../common/uri';
 import { LabelProviderContribution, LabelProvider, DidChangeLabelEvent } from './label-provider';
+import { codicon } from './widgets';
 
 export namespace DiffUris {
 
@@ -101,7 +102,7 @@ export class DiffUriLabelProviderContribution implements LabelProviderContributi
     }
 
     getIcon(uri: URI): string {
-        return 'fa fa-columns';
+        return codicon('split-horizontal');
     }
 
     affects(diffUri: URI, event: DidChangeLabelEvent): boolean {

packages/core/src/browser/label-provider.ts

@@ -27,7 +27,7 @@ import { ResourceLabelFormatter, ResourceLabelFormatting } from '../common/label
 /**
  * @internal don't export it, use `LabelProvider.folderIcon` instead.
  */
-const DEFAULT_FOLDER_ICON = 'fa fa-folder';
+const DEFAULT_FOLDER_ICON = '';
 /**
  * @internal don't export it, use `LabelProvider.fileIcon` instead.
  */

packages/core/src/browser/progress-status-bar-item.ts

@@ -73,7 +73,7 @@ export class ProgressStatusBarItem implements ProgressClient {
             this.statusBar.removeElement(this.id);
             return;
         }
-        const text = `$(refresh~spin) ${message}`;
+        const text = `$(codicon-sync~spin) ${message}`;
         this.statusBar.setElement(this.id, {
             text,
             alignment: StatusBarAlignment.LEFT,

packages/core/src/browser/shell/application-shell.ts

@@ -1345,7 +1345,7 @@ export class ApplicationShell extends Widget {
             this.statusBar.removeElement(BOTTOM_PANEL_TOGGLE_ID);
         } else {
             const element: StatusBarEntry = {
-                text: '$(window-maximize)',
+                text: '$(codicon-window)',
                 alignment: StatusBarAlignment.RIGHT,
                 tooltip: 'Toggle Bottom Panel',
                 command: 'core.toggle.bottom.panel',

packages/core/src/browser/shell/tab-bar-toolbar.tsx

@@ -17,7 +17,7 @@
 import debounce = require('lodash.debounce');
 import * as React from 'react';
 import { inject, injectable, named } from 'inversify';
-import { Widget, ReactWidget } from '../widgets';
+import { Widget, ReactWidget, codicon, ACTION_ITEM } from '../widgets';
 import { LabelParser, LabelIcon } from '../label-parser';
 import { ContributionProvider } from '../../common/contribution-provider';
 import { FrontendApplicationContribution } from '../frontend-application';
@@ -369,8 +369,9 @@ export class TabBarToolbar extends ReactWidget {
             }
         }
         const command = this.commands.getCommand(item.command);
-        const iconClass = (typeof item.icon === 'function' && item.icon()) || item.icon || (command && command.iconClass);
+        let iconClass = (typeof item.icon === 'function' && item.icon()) || item.icon as string || (command && command.iconClass);
         if (iconClass) {
+            iconClass += ` ${ACTION_ITEM}`;
             classNames.push(iconClass);
         }
         const tooltip = item.tooltip || (command && command.label);
@@ -402,7 +403,7 @@ export class TabBarToolbar extends ReactWidget {
 
     protected renderMore(): React.ReactNode {
         return !!this.more.size && <div key='__more__' className={TabBarToolbar.Styles.TAB_BAR_TOOLBAR_ITEM + ' enabled'}>
-            <div id='__more__' className='fa fa-ellipsis-h' onClick={this.showMoreContextMenu} title='More Actions...' />
+            <div id='__more__' className={codicon('ellipsis', true)} onClick={this.showMoreContextMenu} title='More Actions...' />
         </div>;
     }
 

packages/core/src/browser/status-bar/status-bar.tsx

@@ -195,8 +195,10 @@ export class StatusBarImpl extends ReactWidget implements StatusBar {
                 const octicon = getIconByName(val.name);
                 if (octicon) {
                     children.push(<span key={key} className={val.animation ? 'fa-' + val.animation : 'fa'}><Octicon icon={octicon} height={12.5} width={12.5} /></span>);
+                } else if (val.name.startsWith('codicon-')) {
+                    children.push(<span key={key} className={`codicon ${val.name}${val.animation ? ' fa-' + val.animation : ''}`}></span>);
                 } else {
-                    children.push(<span key={key} className={`fa fa-${val.name} ${val.animation ? 'fa-' + val.animation : ''}`}></span>);
+                    children.push(<span key={key} className={`fa fa-${val.name}${val.animation ? ' fa-' + val.animation : ''}`}></span>);
                 }
             } else {
                 children.push(<span key={key}>{val}</span>);

packages/core/src/browser/style/index.css

@@ -159,6 +159,16 @@ blockquote {
     outline: none;
 }
 
+.action-item {
+  padding: 2px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+
+.action-item:hover {
+    background-color: rgba(50%, 50%, 50%, 0.2);
+}
+
 button.theia-button, .theia-button {
     border: none;
     color: var(--theia-button-foreground);

packages/core/src/browser/style/menus.css

@@ -180,16 +180,26 @@
 
 .p-Menu-itemIcon::before,
 .p-Menu-itemSubmenuIcon::before {
-  font-family: FontAwesome;
+  font: normal normal normal 16px/1 codicon;
+  display: inline-block;
+  text-decoration: none;
+  text-rendering: auto;
+  text-align: center;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  transform: translateY(20%);
 }
 
 
 .p-Menu-item.p-mod-toggled > .p-Menu-itemIcon::before {
-  content: '\f00c';
+  content: '\eab2';
+  transform: scale(0.8);
 }
 
 
 .p-Menu-item[data-type='submenu'] > .p-Menu-itemSubmenuIcon::before {
-  content: '\f0da';
-
+  content: '\eab6';
 }

packages/core/src/browser/style/sidepanel.css

@@ -19,7 +19,7 @@
 |----------------------------------------------------------------------------*/
 
 :root {
-  --theia-private-sidebar-tab-width: 50px;
+  --theia-private-sidebar-tab-width: 48px;
   --theia-private-sidebar-tab-height: 32px;
   --theia-private-sidebar-tab-padding-top-and-bottom: 11px;
   --theia-private-sidebar-tab-padding-left-and-right: 10px;
@@ -42,6 +42,10 @@
   max-width: var(--theia-private-sidebar-tab-width);
 }
 
+.p-TabBar-content {
+  gap: 4px 0px;
+}
+
 .p-TabBar.theia-app-sides .p-TabBar-content {
   z-index: 1;
 }
@@ -109,10 +113,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 23px;
+  font-size: 24px;
   text-align: center;
   color: inherit;
-  background-color: var(--theia-activityBar-inactiveForeground);
 
   /* svg */
   width: var(--theia-private-sidebar-tab-width);
@@ -139,6 +142,10 @@
 .p-TabBar.theia-app-sides .p-TabBar-tabIcon:hover,
 .p-TabBar.theia-app-sides .p-mod-current .p-TabBar-tabIcon {
   color: var(--theia-activityBar-foreground);
+}
+
+.p-TabBar.theia-app-sides .p-TabBar-tabIcon.theia-plugin-view-container:hover,
+.p-TabBar.theia-app-sides .p-mod-current .p-TabBar-tabIcon.theia-plugin-view-container {
   background-color: var(--theia-activityBar-foreground);
 }
 

packages/core/src/browser/style/status-bar.css

@@ -59,6 +59,11 @@ body.theia-no-open-workspace #theia-statusBar {
     margin-left: calc(var(--theia-ui-padding)/2);
 }
 
+#theia-statusBar .area .element .codicon {
+    /* Scaling down codicons from 16 to 14 pixels */
+    font-size: 14px;
+}
+
 #theia-statusBar .area .element > *:last-child {
     margin-right: calc(var(--theia-ui-padding)/2);
 }

packages/core/src/browser/style/tabs.css

@@ -189,7 +189,6 @@ body.theia-editor-highlightModifiedTabs
     min-height: 14px;
     background-size: 13px;
     background-position-y: 3px;
-    background: var(--theia-icon-foreground);
     -webkit-mask-repeat: no-repeat;
     -webkit-mask-size: auto 13px;
     mask-repeat: no-repeat;
@@ -212,32 +211,50 @@ body.theia-editor-highlightModifiedTabs
 }
 
 .p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-closable > .p-TabBar-tabCloseIcon {
-  padding-left: 10px;
+  padding: 2px;
+  margin-left: 4px;
   height: var(--theia-icon-size);
   width: var(--theia-icon-size);
-  background-size: 13px;
-  background-position: center;
-  background-repeat: no-repeat;
+  font: normal normal normal 16px/1 codicon;
+  display: inline-block;
+  text-decoration: none;
+  text-rendering: auto;
+  text-align: center;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}
+
+.p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-closable > .p-TabBar-tabCloseIcon:hover {
+  border-radius: 5px;
+  background-color: rgba(50%, 50%, 50%, 0.2);
 }
 
 .p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-closable {
-  padding-right: 2px;
+  padding-right: 4px;
 }
 
+.p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-current > .theia-tab-icon-label > .p-TabBar-tabIcon {
+  margin-top: -2px;
+}
 
-.p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-closable:hover > .p-TabBar-tabCloseIcon,
 .p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-current > .p-TabBar-tabCloseIcon {
-  background-image: var(--theia-icon-close);
+  margin-top: -2px;
+}
+
+.p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-closable:hover > .p-TabBar-tabCloseIcon:before,
+.p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-closable.p-TabBar-tab.p-mod-current > .p-TabBar-tabCloseIcon:before { 
+  content: "\ea76" 
 }
 
-.p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-closable.theia-mod-dirty > .p-TabBar-tabCloseIcon {
-  background-size: 10px;
-  background-image: var(--theia-icon-circle);
+.p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-closable.theia-mod-dirty > .p-TabBar-tabCloseIcon:before { 
+  content: "\ea71" 
 }
 
-.p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-closable.theia-mod-dirty > .p-TabBar-tabCloseIcon:hover {
-  background-size: 13px;
-  background-image: var(--theia-icon-close);
+.p-TabBar.theia-app-centers .p-TabBar-tab.p-mod-closable.theia-mod-dirty > .p-TabBar-tabCloseIcon:hover:before { 
+  content: "\ea76" 
 }
 
 .p-TabBar-tabIcon.no-icon {
@@ -342,7 +359,7 @@ body.theia-editor-highlightModifiedTabs
 .p-TabBar-toolbar .item {
   display: flex;
   align-items: center;
-  margin-left: 8px; /* `padding` + `margin-right` from the container toolbar */
+  margin-left: 4px; /* `padding` + `margin-right` from the container toolbar */
   opacity: var(--theia-mod-disabled-opacity);;
   cursor: default;
 }
@@ -352,8 +369,9 @@ body.theia-editor-highlightModifiedTabs
     cursor: pointer;
 }
 
-.p-TabBar-toolbar .item.enabled.active {
-    transform: scale(var(--theia-toolbar-active-transform-scale));
+.p-TabBar-toolbar :not(.item.enabled) .action-item {
+  background: transparent;
+  cursor: default;
 }
 
 .p-TabBar-toolbar .item.toggled {

packages/core/src/browser/style/tree.css

@@ -73,7 +73,6 @@
 }
 
 .theia-ExpansionToggle.theia-mod-busy {
-    background: var(--theia-icon-loading) center center no-repeat;
     animation: theia-spin 1.25s linear infinite;
 }