Render Menu Items with Icon (e.g SFSymbol) on Catalyst

Hello,

is there a recommended way to render Menu items, e.g in a SwiftUI ContextMenu with icon (SFSymbols)?

Let's say I have the following setup:

Both buttons render fine on native macOS (e.g Sonoma) but Catalyst refuses to render the symbol at all. I tried every possible combination I could think off. The only way I found was to directly copy and paste a symbol from the SF symbols app and inline it with the label string as unicode. Unfortunately I have a couple custom SF symbols so this isn't really an option for me.

I feel like this is a perfectly valid usecase, as it makes the menu visually a lot easier scannable. With UIKit and Ventura this at least worked for Menubar items but now also seems broken on Sonoma.

I would greatly appreciate any hints. Thanks!

Up vote post of arthurfromberlin Down vote post of arthurfromberlin
509 views
Posted by
arthurfromberlin
Reply
Add a Comment

Replies

This is not currently possible on Mac Catalyst. FWIW the use of images (including symbols) is discouraged in Mac context menus, and is generally against macOS HI guidelines. You'll notice that the built-in system apps on the Mac do not use images in their context menus. Menu bar menus, however, can have images in them (such as in Safari) though this is still quite uncommon.

Copying and pasting symbols from the SF Symbols app as unicode text is also not supported. The character requires the SF Symbols app/fonts to be installed, which the vast majority of users with your app won't have. The character will render as an unknown character for them. It is intended to be used for design prototypes only.

If you believe you have a valid use case for images in Mac Catalyst context menus, we would appreciate a feedback report with more details. Thank you!

Posted by
Frameworks Engineer
Up vote reply of Frameworks Engineer Down vote reply of Frameworks Engineer
Add a Comment

a use case for this would be a context menu for an image that allows the user to change this icon by choosing from a list of sf symbol images. or something like an emoji picker

i have found the current limitations for catalyst swiftui context menus are a problem more than once.

Posted by
justme1968
Up vote reply of justme1968 Down vote reply of justme1968
Add a Comment