Repository: microsoft/vscode (TypeScript)
Date: 2022-06-15 17:15:14+00:00
Task type: Bug Fix

Issue:
MarkdownString: ThemeIcon doesn't render in <a> without href
<!-- ⚠️⚠️ Do Not Delete This! bug_report_template ⚠️⚠️ -->
<!-- Please read our Rules of Conduct: https://opensource.microsoft.com/codeofconduct/ -->
<!-- 🕮 Read our guide about submitting issues: https://github.com/microsoft/vscode/wiki/Submitting-Bugs-and-Suggestions -->
<!-- 🔎 Search existing issues to avoid creating duplicates. -->
<!-- 🧪 Test using the latest Insiders build to see if your issue has already been fixed: https://code.visualstudio.com/insiders/ -->
<!-- 💡 Instead of creating your report here, use 'Report Issue' from the 'Help' menu in VS Code to pre-fill useful information. -->
<!-- 🔧 Launch with `code --disable-extensions` to check. -->
Does this issue occur when all extensions are disabled?: Yes

<!-- 🪓 If you answered No above, use 'Help: Start Extension Bisect' from Command Palette to try to identify the cause. -->
<!-- 📣 Issues caused by an extension need to be reported directly to the extension publisher. The 'Help > Report Issue' dialog can assist with this. -->
- VS Code Version: 1.68.0
- OS Version: Linux x64 5.18.3-zen1-1-zen

Steps to Reproduce:

1. This code display nothing.

```javascript
const md = new MarkdownString("", true);
md.supportHtml = true;
md.value = `<a>$(sync)</a>`;
createStatusBarItem().tooltip = md;
```




Issue discussion:
<!-- 6d457af9-96bd-47a8-a0e8-ecf120dfffc1 -->
This feature request is now a candidate for our backlog. The community has 60 days to [upvote](https://github.com/microsoft/vscode/wiki/Issues-Triaging#up-voting-a-feature-request) the issue. If it receives 20 upvotes we will move it to our backlog. If not, we will close it. To learn more about how we handle feature requests, please see our [documentation](https://aka.ms/vscode-issue-lifecycle).

Happy Coding!
Actually this is already enabled, you just need to set `supportThemeIcons` as well as `supportHtml`.

The bug is that theme icons gets stripped from an `<a>` without an href

Solution patch:
diff --git a/src/vs/base/browser/markdownRenderer.ts b/src/vs/base/browser/markdownRenderer.ts
--- a/src/vs/base/browser/markdownRenderer.ts
+++ b/src/vs/base/browser/markdownRenderer.ts
@@ -265,7 +265,7 @@ export function renderMarkdown(markdown: IMarkdownString, options: MarkdownRende
 				|| /^command:(\/\/\/)?_workbench\.downloadResource/i.test(href)
 			) {
 				// drop the link
-				a.replaceWith(a.textContent ?? '');
+				a.replaceWith(...a.childNodes);
 			} else {
 				let resolvedHref = _href(href, false);
 				if (markdown.baseUri) {


Test patch:
diff --git a/src/vs/base/test/browser/markdownRenderer.test.ts b/src/vs/base/test/browser/markdownRenderer.test.ts
--- a/src/vs/base/test/browser/markdownRenderer.test.ts
+++ b/src/vs/base/test/browser/markdownRenderer.test.ts
@@ -173,6 +173,14 @@ suite('MarkdownRenderer', () => {
 </tbody></table>
 `);
 		});
+
+		test('render icon in <a> without href (#152170)', () => {
+			const mds = new MarkdownString(undefined, { supportThemeIcons: true, supportHtml: true });
+			mds.appendMarkdown(`<a>$(sync)</a>`);
+
+			const result: HTMLElement = renderMarkdown(mds).element;
+			assert.strictEqual(result.innerHTML, `<p><span class="codicon codicon-sync"></span></p>`);
+		});
 	});
 
 	suite('ThemeIcons Support Off', () => {