Use native OS icons instead of generic arrows in image context menu

Use case or problem

“Open in default app” and “Show in system explorer” both use the same generic arrow icon, so users have to read the labels to tell them apart. These options currently only appear on the context menu for images.

Proposed solution

Use the actual OS icons instead: the File Explorer icon for “Show in system explorer,” and the default app’s icon (e.g. Windows Photos for images) for “Open in default app.”

For Example it would display icon for “Show in system explorer”.

icons8-file-explorer-96

A workaround is to use CSS to set the icon.

[data-section="system"]:nth-of-type(2) {
	.lucide-arrow-up-right {
		display: none;
	}
	
	&::before {
		width: 8px;
		content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAh0lEQVQ4T2NkoBAwwllkAuoY8H8Bw2oGBoYQmCAMMCYQtgBiwBKW/wxqKjAx4sCrNyaMPm/OQgw4pfEfJk4KYDS7wTjIDLC6fwbuPHzgmKIJmMbwwuAyAOZMGEB2HTYvrGVgYAjCpggGMOT+M6xhNL8RipLSLFd+gaeH4+E8RMmhKCIHUGwAAFhiSRFeNkfqAAAAEGRlQkcxNTcxRUFEMENEMENFRkIxDEYgsgAAAABJRU5ErkJggg==");
}

How to use that CSS snippet: CSS snippets - Obsidian Help

Works in File explorer, three-dot kebab menu, and note tab right-click.

You might have to adjust this in the case that a plugin (if plugins can) adds menu items to that or another group with the same data-section name. Or if you use a plugin to change the order of your menu options.