Resize SF Symbol in Mac Catalyst Toolbar

Is there a way to resize the symbols in a toolbar within a Mac Catalyst app? When I use SF Symbols in a UIBarButton item, it does not look correct - especially when comparing to Apple apps with the same icons. I have tried applying configurations to the image, without luck.


let item = UIBarButtonItem(image: UIImage(systemName: "exclamationmark.bubble"), style: .plain, target: self, action: nil)
            let button = NSToolbarItem(itemIdentifier: itemIdentifier, barButtonItem: item)
return button
Answered by espen in 414459022

This workaround / extension on UIImage fixed the issue:

#if targetEnvironment(macCatalyst)
extension UIImage {
    
    func symbolForNSToolbar() -> UIImage? {
        guard let symbol = applyingSymbolConfiguration(.init(pointSize: 13)) else { return nil }
        
        let format = UIGraphicsImageRendererFormat()
        format.preferredRange = .standard
        
        return UIGraphicsImageRenderer(size: symbol.size, format: format).image { _ in symbol.draw(at: .zero) }.withRenderingMode(.alwaysTemplate)
    }
}
#endif

Screenshot of the issue: https://snipboard.io/NXjD86.jpg


Items placed into a NSToolbarItemGroup seems to scale correctly. But now it looks even more wierd, as the height of the segmented bar is smaller than the regular buttons.

Accepted Answer

This workaround / extension on UIImage fixed the issue:

#if targetEnvironment(macCatalyst)
extension UIImage {
    
    func symbolForNSToolbar() -> UIImage? {
        guard let symbol = applyingSymbolConfiguration(.init(pointSize: 13)) else { return nil }
        
        let format = UIGraphicsImageRendererFormat()
        format.preferredRange = .standard
        
        return UIGraphicsImageRenderer(size: symbol.size, format: format).image { _ in symbol.draw(at: .zero) }.withRenderingMode(.alwaysTemplate)
    }
}
#endif
Resize SF Symbol in Mac Catalyst Toolbar
 
 
Q