I explored a core option but I couldn't find one that made sense given the current state, and that didn't tie us into using mw-ui-icon everywhere. My recommendation here is thus that we should use the SkinTemplateNavigation hook and set the link-class property on all relevant items to include mw-ui-icon

diff --git a/includes/Hooks.php b/includes/Hooks.php
index b2f5818d..11d08fd6 100644
--- a/includes/Hooks.php
+++ b/includes/Hooks.php
@@ -96,6 +96,10 @@ class Hooks {
 		return $item;
 	}
 
+	private static function getIconFromKey( $key ) {
+		return 'wikimedia-language';
+	}
+
 	/**
 	 * Upgrades Vector's watch action to a watchstar.
 	 *
@@ -121,6 +125,13 @@ class Hooks {
 						// Remove user page from personal menu dropdown for logged in users.
 						unset( $content_navigation['user-menu']['userpage'] );
 					}
+
+					$userMenu = $content_navigation['user-menu'];
+					foreach ( $userMenu as $key => $value ) {
+						$linkClass = $content_navigation['user-menu'][$key]['link-class'] ?? '';
+						$content_navigation['user-menu'][$key]['link-class'] = $linkClass .
+							' mw-ui-icon mw-ui-icon-before mw-ui-icon-' . self::getIconFromKey( $key );
+					}
 				} else {
 					// Remove user page from personal toolbar since it will be inside the personal menu for logged in
 					// users when the feature flag is disabled.

A quick attempt at this proved its a viable option although I was having an issue with the talk page item for unknown reasons (which might be due to some core bug) and it's likely going to require some styling changes, including more hacks for mw-ui-icon sizing:

What do we need to achieve technically here?
Ability to add icons and to provide the correct styles, mostly display, sizing, margins, vertical alignment. Anything else?

hi @alexhollender - some Qs about icons:

• For "Talk" links in the new personal menu (which is not included in this ticket's description's screenshot), which icon should be used? Based on what icons are available in https://doc.wikimedia.org/oojs-ui/master/demos/?page=icons&theme=wikimediaui&direction=ltr&platform=desktop and on https://phabricator.wikimedia.org/T276566, looks like "userTalk" is the one?
• Would you happen to know which extension corresponds to "Uploaded media"? I found several after a quick search but not sure which one applies - should that icon apply to any media upload extension? >>> nvm - we figured out it is added under Contributions as part of enabling Content Translation feature.
• Same question as above for "Translations" >>> nvm - we figured out it is added under Contributions as part of enabling Content Translation feature.
• Confirming that any Gadget does not need an associated icon?

Change 698065 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[mediawiki/skins/Vector@master] Prefix user links menu items with icons

https://gerrit.wikimedia.org/r/698065

Change 698066 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[mediawiki/extensions/SandboxLink@master] Prefix SandboxLink with icon for modern Vector.

https://gerrit.wikimedia.org/r/698066

In T276562#7131998, @cjming wrote:

hi @alexhollender - some Qs about icons:

• For "Talk" links in the new personal menu (which is not included in this ticket's description's screenshot), which icon should be used? Based on what icons are available in https://doc.wikimedia.org/oojs-ui/master/demos/?page=icons&theme=wikimediaui&direction=ltr&platform=desktop and on https://phabricator.wikimedia.org/T276566, looks like "userTalk" is the one?

ah whoops, just updated the screenshot and yup, it's the userTalk one

• Confirming that any Gadget does not need an associated icon?

yes that's correct, any icons will have to be provided by the gadget itself

Change 698065 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Prefix user links menu items with icons

https://gerrit.wikimedia.org/r/698065

Change 698066 merged by jenkins-bot:

[mediawiki/extensions/SandboxLink@master] Add icon to Sandbox link.

https://gerrit.wikimedia.org/r/698066

hi @Edtadros - huh, it was there previously - something must have changed recently with how that link is built. I'll take a look. Thanks for the catch.

Change 700936 had a related patch set uploaded (by Clare Ming; author: Clare Ming):

[mediawiki/skins/Vector@master] Add icon prefix to login link

https://gerrit.wikimedia.org/r/700936

Change 700936 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Add icon prefix to login link

https://gerrit.wikimedia.org/r/700936

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Big Sur
Browser: Chrome
Device: MBP
Emulated Device: NA

Test Artifact(s):

QA Steps

Go to the beta cluster i.e. https://en.wikipedia.beta.wmflabs.org/wiki/Albert_Einstein
✅ AC1: For both logged in/out states, you should see the icons prefixed to the new user menu

@Jdlrobson / @cjming, this is unrelated to the prefixed icons. The user menu and user talk page get awkwardly shifted lower and to the left at around 1225px.

This can be ignored. This is being dealt with in another ticket: T276566