Update menu icons to use icon font #86708

src/vs/base/browser/ui/menu/menu.css

@@ -51,8 +51,17 @@
 
 .monaco-menu .monaco-action-bar.vertical .submenu-indicator {
 	height: 100%;
-	mask: url('submenu.svg') no-repeat 90% 50%/13px 13px;
-	-webkit-mask: url('submenu.svg') no-repeat 90% 50%/13px 13px;
+}
+
+.monaco-menu .monaco-action-bar.vertical .submenu-indicator.codicon {
+	font-size: 16px;
+	display: flex;
+	align-items: center;
+}
+
+.monaco-menu .monaco-action-bar.vertical .submenu-indicator.codicon::before {
+	margin-left: auto;
+	margin-right: -20px;
 }
 
 .monaco-menu .monaco-action-bar.vertical .action-item.disabled .keybinding,
@@ -94,14 +103,15 @@
 .monaco-menu .monaco-action-bar.vertical .menu-item-check {
 	position: absolute;
 	visibility: hidden;
-	mask: url('check.svg') no-repeat 50% 56%/15px 15px;
-	-webkit-mask: url('check.svg') no-repeat 50% 56%/15px 15px;
 	width: 1em;
 	height: 100%;
 }
 
 .monaco-menu .monaco-action-bar.vertical .action-menu-item.checked .menu-item-check {
 	visibility: visible;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
 
 /* Context Menu */
@@ -186,9 +196,6 @@
 }
 
 .menubar .toolbar-toggle-more {
-	background-position: center;
-	background-repeat: no-repeat;
-	background-size: 14px;
 	width: 20px;
 	height: 100%;
 }
@@ -197,21 +204,18 @@
 	position: absolute;
 	left: 0px;
 	top: 0px;
-	background-position: center;
-	background-repeat: no-repeat;
-	background-size: 16px;
 	cursor: pointer;
 	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
 }
 
 .menubar .toolbar-toggle-more {
-	display: inline-block;
 	padding: 0;
-	mask: url('ellipsis.svg') no-repeat 50% 55%/14px 14px;
-	-webkit-mask: url('ellipsis.svg') no-repeat 50% 55%/14px 14px;
+	vertical-align: sub;
 }
 
-.menubar.compact .toolbar-toggle-more {
-	mask: url('menu.svg') no-repeat 50% 55%/16px 16px;
-	-webkit-mask: url('menu.svg') no-repeat 50% 55%/16px 16px;
+.menubar.compact .toolbar-toggle-more::before {
+	content: "\eb94" !important;
 }

src/vs/base/browser/ui/menu/menu.ts

@@ -422,7 +422,7 @@ class BaseMenuActionViewItem extends BaseActionViewItem {
 			}
 		}
 
-		this.check = append(this.item, $('span.menu-item-check'));
+		this.check = append(this.item, $('span.menu-item-check.codicon.codicon-check'));
 		this.check.setAttribute('role', 'none');
 
 		this.label = append(this.item, $('span.action-label'));
@@ -602,7 +602,7 @@ class BaseMenuActionViewItem extends BaseActionViewItem {
 		}
 
 		if (this.check) {
-			this.check.style.backgroundColor = fgColor ? `${fgColor}` : '';
+			this.check.style.color = fgColor ? `${fgColor}` : '';
 		}
 
 		if (this.container) {
@@ -662,7 +662,7 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem {
 			addClass(this.item, 'monaco-submenu-item');
 			this.item.setAttribute('aria-haspopup', 'true');
 			this.updateAriaExpanded('false');
-			this.submenuIndicator = append(this.item, $('span.submenu-indicator'));
+			this.submenuIndicator = append(this.item, $('span.submenu-indicator.codicon.codicon-chevron-right'));
 			this.submenuIndicator.setAttribute('aria-hidden', 'true');
 		}
 
@@ -822,7 +822,7 @@ class SubmenuMenuActionViewItem extends BaseMenuActionViewItem {
 		const fgColor = isSelected && this.menuStyle.selectionForegroundColor ? this.menuStyle.selectionForegroundColor : this.menuStyle.foregroundColor;
 
 		if (this.submenuIndicator) {
-			this.submenuIndicator.style.backgroundColor = fgColor ? `${fgColor}` : '';
+			this.submenuIndicator.style.color = fgColor ? `${fgColor}` : '';
 		}
 
 		if (this.parentData.submenu) {

src/vs/base/browser/ui/menu/menubar.ts

@@ -310,7 +310,7 @@ export class MenuBar extends Disposable {
 	createOverflowMenu(): void {
 		const label = this.options.compactMode !== undefined ? nls.localize('mAppMenu', 'Application Menu') : nls.localize('mMore', "...");
 		const buttonElement = $('div.menubar-menu-button', { 'role': 'menuitem', 'tabindex': -1, 'aria-label': label, 'title': label, 'aria-haspopup': true });
-		const titleElement = $('div.menubar-menu-title.toolbar-toggle-more', { 'role': 'none', 'aria-hidden': true });
+		const titleElement = $('div.menubar-menu-title.toolbar-toggle-more.codicon.codicon-more', { 'role': 'none', 'aria-hidden': true });
 
 		buttonElement.appendChild(titleElement);
 		this.container.appendChild(buttonElement);

src/vs/workbench/browser/parts/titlebar/menubarControl.ts

@@ -333,7 +333,7 @@ export class CustomMenubarControl extends MenubarControl {
 				}
 
 				.monaco-workbench .menubar .toolbar-toggle-more {
-					background-color: ${menubarActiveWindowFgColor}
+					color: ${menubarActiveWindowFgColor}
 				}
 				`);
 			}
@@ -346,7 +346,7 @@ export class CustomMenubarControl extends MenubarControl {
 				}
 
 				.monaco-workbench .menubar.compact .toolbar-toggle-more {
-					background-color: ${activityBarInactiveFgColor}
+					color: ${activityBarInactiveFgColor}
 				}
 				`);
 
@@ -357,28 +357,22 @@ export class CustomMenubarControl extends MenubarControl {
 				collector.addRule(`
 				.monaco-workbench .menubar.compact > .menubar-menu-button.open,
 				.monaco-workbench .menubar.compact > .menubar-menu-button:focus,
-				.monaco-workbench .menubar.compact:not(:focus-within) > .menubar-menu-button:hover {
-					color: ${activityBarFgColor};
-				}
-
+				.monaco-workbench .menubar.compact:not(:focus-within) > .menubar-menu-button:hover,
 				.monaco-workbench .menubar.compact  > .menubar-menu-button.open .toolbar-toggle-more,
 				.monaco-workbench .menubar.compact > .menubar-menu-button:focus .toolbar-toggle-more,
 				.monaco-workbench .menubar.compact:not(:focus-within) > .menubar-menu-button:hover .toolbar-toggle-more {
-					background-color: ${activityBarFgColor}
+					color: ${activityBarFgColor};
 				}
 			`);
 			}
 
 			const menubarInactiveWindowFgColor = theme.getColor(TITLE_BAR_INACTIVE_FOREGROUND);
 			if (menubarInactiveWindowFgColor) {
 				collector.addRule(`
-					.monaco-workbench .menubar.inactive:not(.compact) > .menubar-menu-button {
+					.monaco-workbench .menubar.inactive:not(.compact) > .menubar-menu-button,
+					.monaco-workbench .menubar.inactive:not(.compact) > .menubar-menu-button .toolbar-toggle-more  {
 						color: ${menubarInactiveWindowFgColor};
 					}
-
-					.monaco-workbench .menubar.inactive:not(.compact) > .menubar-menu-button .toolbar-toggle-more {
-						background-color: ${menubarInactiveWindowFgColor}
-					}
 				`);
 			}
 
@@ -388,14 +382,11 @@ export class CustomMenubarControl extends MenubarControl {
 				collector.addRule(`
 					.monaco-workbench .menubar:not(.compact) > .menubar-menu-button.open,
 					.monaco-workbench .menubar:not(.compact) > .menubar-menu-button:focus,
-					.monaco-workbench .menubar:not(:focus-within):not(.compact) > .menubar-menu-button:hover {
-						color: ${menubarSelectedFgColor};
-					}
-
+					.monaco-workbench .menubar:not(:focus-within):not(.compact) > .menubar-menu-button:hover,
 					.monaco-workbench .menubar:not(.compact) > .menubar-menu-button.open .toolbar-toggle-more,
 					.monaco-workbench .menubar:not(.compact) > .menubar-menu-button:focus .toolbar-toggle-more,
 					.monaco-workbench .menubar:not(:focus-within):not(.compact) > .menubar-menu-button:hover .toolbar-toggle-more {
-						background-color: ${menubarSelectedFgColor}
+						color: ${menubarSelectedFgColor};
 					}
 				`);
 			}