Toolbar icons using SF Pro font

my first attempt to create BSish toolbar icons: instead of loading pcts, I tried using SF Pro font’s glyphs, for a Preferences window. At present, two toolbaritems only: General and Advanced.

Although the outcome seems good enough (below), is it a good idea to go this way? Or should I load real pictures?

  1. open event of the toolbar
    Sub Open() Handles Open
    //to do: check if user has got SF Pro installed
    me.ToolItem1.Icon = initToolbarIcons(Encodings.UTF8.Chr(&h1008CB),true)//gear
    me.ToolItem2.Icon = initToolbarIcons(encodings.utf8.chr(&h10094E),false)//double gear

me.ToolItem1.Caption = “General”
me.ToolItem1.Name = “General”
me.ToolItem1.pressed = true

me.ToolItem2.Caption = “Advanced”
me.ToolItem2.Name = “Advanced”
End Sub

  1. and this is the method returning the pictures
    Public Function initToolbarIcons(s as string, applyClr as Boolean) As picture
    dim p as picture
    dim sf as Double = ScaleFactor
    p = new Picture(32sf,32sf)
    p.Graphics.TextFont = “SFPro”
    p.Graphics.AntiAlias = false
    p.Graphics.TextSize = 22*sf
    if IsDarkMode then
    p.Graphics.ForeColor = color.Gray
    end if
    if applyClr then//matching more or less the label.color when item.pressed
    if IsDarkMode then
    p.Graphics.ForeColor = clrDarkMode
    p.Graphics.ForeColor = clrLightMode
    end if
    end if
    p.Graphics.DrawString s, ((p.Width-p.Graphics.stringwidth(s))/2) * sf, 23 * sf
    Return p
    End Function

  2. resulting in this pct
    Screen Shot 2021-10-19 at 6.14.34 PM

  3. code for action event wtc. not added; but it is more or less the one in the open event.


This is not the correct way to do it and it may not work on your customers machines.

When testing Big Sur, I noticed that the SF Symbols fonts were not installed on the machine until I installed the SF Symbols application. SF Symbols displayed by using the API continued to work, but not using text functions.

Ideally you would use as many of the existing image names as possible, this way they’ll also work on 10.15 and maybe even lower.

AFAIK, you’ll need to either use a 3rd Party Toolkit (such as the Ohanaware App Kit or MBS) or write some declares to be to access system provided imagery and apply it to controls.

1 Like

Why not:

Item.icon = Picture.SystemImage("sf_icon_name", etc...)

Good to know that the above approach wont work. Thank you.

Because Picture.SystemImage is (not yet) supported on Desktop.
So, let’s hope Xojo come to our rescue. Thanks.

There’s a Feedback case to bring proper support to macOS: feedback://showreport?report_id=60751

1 Like

Excellent! Hope increasing.

There are no guarantees, of course, it’s just a user request at this point. It would seem a fairly logical feature, however, seeing as iOS has it. If it’s important to you, add some Feedback points. It’s currently 35th.

1 Like

After adding my support I expected it to move down to to 34th. Yet it is still 35th; I guess the reason being my license expired.
Thanks again.

Forum for Xojo Programming Language and IDE. Copyright © 2021 Xojo, Inc.