Change:
This is a bug in the . In general, the extension API allows icons to be embedded in text by referencing them inside of . This functionality does not work consistently in the walkthroughs API. <!-- Do Not Delete This! bugreporttemplate --<!-- Please read our Rules of Conduct: --<!-- Read our guide about submitting issues: --<!-- Search existing issues to avoid creating duplicates. --<!-- Test using the latest Insiders build to see if your issue has already been fixed: --<!-- Instead of creating your report here, use 'Report Issue' from the 'Help' menu in VS Code to pre-fill useful information. --<!-- Launch with to check. --Does this issue occur when all extensions are disabled?: N/A; this is a bug in the extension API VS Code Version: 1.69 OS Version: macOS 12.4 Steps to Reproduce: a walkthrough step in your extension, e.g. "walkthroughs": [ { "id": "welcome", "title": "Example $(github)", "description": "See? The icon looks nice, doesn't it?", "steps": [ { "id": "example-step", "title": "Example step", "description": "Example description", "media": { "image": "", "altText": "" } } ] } ] 2 Observe that the icon in the title ( in the example above) renders correctly in the Open Walkthrough… quickpick list: <img width="372" alt="Screen Shot 2022-07-12 at 10 21 08 AM" src="https://user-"up the walkthrough and observe that the icon is not rendered, and instead you see the literal string : <img width="508" alt="Screen Shot 2022-07-12 at 10 22 09 AM" src="https://user-"
Thanks for creating this issue! It looks like you may be using an old version of VS Code, the latest stable release is 1.69.1. Please try upgrading to the latest version and checking whether this issue remains. Happy Coding!
Yes, it still exists in 1.69.1.
Thanks for the remarkably fast turnaround time, appreciate you.
Still see this in Version: 1.70.0-insider (user setup) Commit: Date: 2022-07-27T05:16:37.759Z OS: Windows_NT x64 10.0. ! ! ! generate a new TypeScript extension with add the snippet from the issue description to the
I only fixed the icon in the place that it didn't work in the issue description, sound like I have a few more places to fix :)
LGTM in the menu, in the walkthrough title, and in a step. <img width="984" alt="image" src="https://user-"

Discussion:
import { restoreWalkthroughsConfigurationKey, RestoreWalkthroughsConfigurationValue } from 'vs/workbench/contrib/welcomeGettingStarted/browser/startupPage'; import { GettingStartedDetailsRenderer } from 'vs/workbench/contrib/welcomeGettingStarted/browser/gettingStartedDetailsRenderer'; import { IAccessibilityService } from 'vs/platform/accessibility/common/accessibility'; <ins> import { renderLabelWithIcons } from 'vs/base/browser/ui/iconLabel/iconLabels'; </ins> const SLIDE_TRANSITION_TIME_MS = 250; const configurationKey = 'workbench.startupEditor';

if (category.isFeatured) { reset(featuredBadge, $('.featured', {}, $('span.featured-icon.codicon.codicon-star-empty'))); <del> reset(descriptionContent, category.description); </del> <ins> reset(descriptionContent, ...renderLabelWithIcons(category.description)); </ins> } return $('button.getting-started-category' + (category.isFeatured ? '.featured' : ''),

this.iconWidgetFor(category), $('.category-description-container', {}, $('h2.category-title.max-lines-3', { 'x-category-title-for': category.id }, category.title), <del> $('.category-description.description.max-lines-3', { 'x-category-description-for': category.id }, category.description))); </del> <ins> $('.category-description.description.max-lines-3', { 'x-category-description-for': category.id }, ...renderLabelWithIcons(category.description)))); </ins> const stepListContainer = $('.step-list-container');

margin-left: 28px; } <ins> .monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category .description-content > .codicon { padding-right: 1px; font-size: 16px; } </ins> .monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlide .getting-started-category .description-content:not(:empty){ margin-bottom: 8px; }

flex: 150px 1 1000 } <del> .monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideDetails .getting-started-category .codicon { </del> <ins> .monaco-workbench .part.editor>.content .gettingStartedContainer .gettingStartedSlideDetails .gettingStartedDetailsContent>.getting-started-category>.codicon-getting-started-setup { </ins> margin-right: 8px; font-size: 28px; }