vscode support iconPath in QuickPickItem

CHANGELOG.md

@@ -7,6 +7,7 @@
 ## v1.42.0
 
 - [core] fixed logger level propagation when log config file changes at runtime [#12566](https://github.com/eclipse-theia/theia/pull/12566) - Contributed on behalf of STMicroelectronics
+- [vscode] support iconPath in QuickPickItem [#12945](https://github.com/eclipse-theia/theia/pull/12945) - Contributed by STMicroelectronics
 - [vsx-registry] added a hint to extension fetching ENOTFOUND errors [#12858](https://github.com/eclipse-theia/theia/pull/12858) - Contributed by STMicroelectronics
 
 ## v1.41.0 - 08/31/2023

packages/core/src/common/quick-pick-service.ts

@@ -54,6 +54,7 @@ export interface QuickPickItem {
     description?: string;
     detail?: string;
     keySequence?: KeySequence;
+    iconPath?: URI | Uri | { light?: URI | Uri; dark: URI | Uri } | { id: string };
     iconClasses?: string[];
     alwaysShow?: boolean;
     highlights?: QuickPickItemHighlights;

packages/monaco/src/browser/monaco-quick-input-service.ts

@@ -18,7 +18,7 @@ import {
     ApplicationShell,
     InputBox, InputOptions, KeybindingRegistry, NormalizedQuickInputButton, PickOptions,
     QuickInputButton, QuickInputHideReason, QuickInputService, QuickPick, QuickPickItem,
-    QuickPickItemButtonEvent, QuickPickItemHighlights, QuickPickOptions, QuickPickSeparator
+    QuickPickItemButtonEvent, QuickPickItemHighlights, QuickPickOptions, QuickPickSeparator, codiconArray
 } from '@theia/core/lib/browser';
 import { injectable, inject, postConstruct } from '@theia/core/shared/inversify';
 import {
@@ -42,6 +42,7 @@ import { Event } from '@theia/core';
 import { MonacoColorRegistry } from './monaco-color-registry';
 import { ThemeService } from '@theia/core/lib/browser/theming';
 import { IStandaloneThemeService } from '@theia/monaco-editor-core/esm/vs/editor/standalone/common/standaloneTheme';
+import { ThemeIcon } from '@theia/monaco-editor-core/esm/vs/platform/theme/common/themeService';
 
 // Copied from @vscode/src/vs/base/parts/quickInput/browser/quickInputList.ts
 export interface IListElement {
@@ -316,6 +317,15 @@ export class MonacoQuickInputService implements QuickInputService {
         const monacoPicks: Promise<QuickPickInput<IQuickPickItem>[]> = new Promise(async resolve => {
             const updatedPicks = (await picks).map(pick => {
                 if (pick.type !== 'separator') {
+                    const icon = pick.iconPath;
+                    if (ThemeIcon.isThemeIcon(icon)) {
+                        const codicon = codiconArray(icon.id);
+                        if (pick.iconClasses) {
+                            pick.iconClasses.push(...codicon);
+                        } else {
+                            pick.iconClasses = codicon;
+                        }
+                    }
                     pick.buttons &&= pick.buttons.map(QuickInputButton.normalize);
                 }
                 return pick as M;

packages/plugin-ext/src/plugin/quick-open.ts

@@ -655,6 +655,7 @@ export class QuickPickExt<T extends theia.QuickPickItem> extends QuickInputExt i
                 pickItems.push({
                     kind: item.kind,
                     label: item.label,
+                    iconPath: item.iconPath ? getIconUris(item.iconPath) : undefined,
                     description: item.description,
                     handle,
                     detail: item.detail,

packages/plugin-ext/src/plugin/type-converters.ts

@@ -1212,11 +1212,12 @@ export function convertToTransferQuickPickItems(items: rpc.Item[]): rpc.Transfer
         } else if (item.kind === QuickPickItemKind.Separator) {
             return { type: 'separator', label: item.label, handle: index };
         } else {
-            const { label, description, detail, picked, alwaysShow, buttons } = item;
+            const { label, description, iconPath, detail, picked, alwaysShow, buttons } = item;
             return {
                 type: 'item',
                 label,
                 description,
+                iconPath,
                 detail,
                 picked,
                 alwaysShow,

packages/plugin/src/theia.d.ts

@@ -2140,6 +2140,11 @@ export module '@theia/plugin' {
          */
         kind?: QuickPickItemKind;
 
+        /**
+         * The icon path or {@link ThemeIcon} for the QuickPickItem.
+         */
+        iconPath?: Uri | { light: Uri; dark: Uri } | ThemeIcon;
+
         /**
          * A human-readable string which is rendered less prominent in the same line. Supports rendering of
          * {@link ThemeIcon theme icons} via the `$(<name>)`-syntax.