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

@@ -23,15 +23,16 @@ import { Event, Emitter, Disposable, Path } from '../common';
 import { FrontendApplicationContribution } from './frontend-application';
 import { EnvVariablesServer } from '../common/env-variables/env-variables-protocol';
 import { ResourceLabelFormatter, ResourceLabelFormatting } from '../common/label-protocol';
+import { codicon } from './widgets';
 
 /**
  * @internal don't export it, use `LabelProvider.folderIcon` instead.
  */
-const DEFAULT_FOLDER_ICON = 'fa fa-folder';
+const DEFAULT_FOLDER_ICON = `${codicon('folder')} default-folder-icon`;
 /**
  * @internal don't export it, use `LabelProvider.fileIcon` instead.
  */
-const DEFAULT_FILE_ICON = 'fa fa-file';
+const DEFAULT_FILE_ICON = `${codicon('file')} default-file-icon`;
 
 /**
  * Internal folder icon class for the default (File Icons) theme.

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/quick-input/quick-command-service.ts

@@ -22,6 +22,7 @@ import { CorePreferences } from '../core-preferences';
 import { QuickAccessContribution, QuickAccessProvider, QuickAccessRegistry } from './quick-access';
 import { filterItems, QuickPickItem, QuickPicks } from './quick-input-service';
 import { KeySequence } from '../keys';
+import { codiconArray } from '../widgets';
 
 export const quickCommand: Command = {
     id: 'workbench.action.showCommands'
@@ -139,7 +140,7 @@ export class QuickCommandService implements QuickAccessContribution, QuickAccess
     private getItemIconClasses(command: Command): string[] | undefined {
         const toggledHandler = this.commandRegistry.getToggledHandler(command.id);
         if (toggledHandler) {
-            return ['fa fa-check'];
+            return codiconArray('check');
         }
         return undefined;
     }

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

@@ -57,12 +57,14 @@ export type ApplicationShellLayoutVersion =
     /** view containers are introduced, backward compatible to 2.0 */
     3.0 |
     /** git history view is replaced by a more generic scm history view, backward compatible to 3.0 */
-    4.0;
+    4.0 |
+    /** Replace custom/font-awesome icons with codicons */
+    5.0;
 
 /**
  * When a version is increased, make sure to introduce a migration (ApplicationShellLayoutMigration) to this version.
  */
-export const applicationShellLayoutVersion: ApplicationShellLayoutVersion = 4.0;
+export const applicationShellLayoutVersion: ApplicationShellLayoutVersion = 5.0;
 
 export const ApplicationShellOptions = Symbol('ApplicationShellOptions');
 export const DockPanelRendererFactory = Symbol('DockPanelRendererFactory');
@@ -1371,7 +1373,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

@@ -163,6 +163,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) translateY(20%);
 }
 
 
 .p-Menu-item[data-type='submenu'] > .p-Menu-itemSubmenuIcon::before {
-  content: '\f0da';
-
+  content: '\eab6';
 }

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

@@ -19,13 +19,13 @@
 |----------------------------------------------------------------------------*/
 
 :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;
   --theia-private-sidebar-scrollbar-rail-width: 7px;
   --theia-private-sidebar-scrollbar-width: 5px;
-  --theia-private-sidebar-icon-size: 28px;
+  --theia-private-sidebar-icon-size: 24px;
 }
 
 
@@ -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: var(--theia-private-sidebar-icon-size);
   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

@@ -15,7 +15,7 @@
  ********************************************************************************/
 
 :root {
-    --theia-statusBar-height: 19px;
+    --theia-statusBar-height: 22px;
 }
 
 #theia-statusBar {
@@ -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);
 }