show icon for ai actions in hover (microsoft#263225)

Author: sandy081

src/vs/base/browser/ui/hover/hoverWidget.css

@@ -138,13 +138,18 @@
 
 .monaco-hover .hover-row.status-bar .actions .action-container .action .icon {
 	padding-right: 4px;
+	vertical-align: middle;
 }
 
 .monaco-hover .hover-row.status-bar .actions .action-container a {
 	color: var(--vscode-textLink-foreground);
 	text-decoration: var(--text-link-decoration);
 }
 
+.monaco-hover .hover-row.status-bar .actions .action-container a .icon.codicon {
+	color: var(--vscode-textLink-foreground);
+}
+
 .monaco-hover .markdown-hover .hover-contents .codicon {
 	color: inherit;
 	font-size: inherit;

src/vs/base/browser/ui/hover/hoverWidget.ts

@@ -74,7 +74,8 @@ export class HoverAction extends Disposable {
 		this.action = dom.append(this.actionContainer, $('a.action'));
 		this.action.setAttribute('role', 'button');
 		if (actionOptions.iconClass) {
-			dom.append(this.action, $(`span.icon.${actionOptions.iconClass}`));
+			const iconElement = dom.append(this.action, $(`span.icon`));
+			iconElement.classList.add(...actionOptions.iconClass.split(' '));
 		}
 		this.actionRenderedLabel = keybindingLabel ? `${actionOptions.label} (${keybindingLabel})` : actionOptions.label;
 		const label = dom.append(this.action, $('span'));

src/vs/editor/contrib/hover/browser/markerHoverParticipant.ts

@@ -26,6 +26,8 @@ import { ITextEditorOptions } from '../../../../platform/editor/common/editor.js
 import { IMarker, IMarkerData, MarkerSeverity } from '../../../../platform/markers/common/markers.js';
 import { IOpenerService } from '../../../../platform/opener/common/opener.js';
 import { Progress } from '../../../../platform/progress/common/progress.js';
+import { ThemeIcon } from '../../../../base/common/themables.js';
+import { Codicon } from '../../../../base/common/codicons.js';
 
 const $ = dom.$;
 
@@ -264,6 +266,7 @@ export class MarkerHoverParticipant implements IEditorHoverParticipant<MarkerHov
 					context.statusBar.addAction({
 						label: aiCodeAction.action.title,
 						commandId: aiCodeAction.action.command?.id ?? '',
+						iconClass: ThemeIcon.asClassName(Codicon.sparkle),
 						run: () => {
 							const controller = CodeActionController.get(this._editor);
 							controller?.applyCodeAction(aiCodeAction, false, false, ApplyCodeActionReason.FromProblemsHover);