swiftuitabbarvisionos

Appl SF Symbol square.grid.2x2 is always filled

I'm creating a simple TabBar on visionOS, using square.grid.2x2 which is supposed to be four bordered squares, but the OS keeps rendering them filled as in square.grid.2x2.fill. Am I missing something or maybe this version of the icon is not available on visionOS?

.tabItem {
    Label("Browse", systemImage: "square.grid.2x2")
}

enter image description here

Solution

  • In visionOS, this is an under-the-hood behavior for rendering symbols/icons in the tabbar (I mean an automatic selection of filled symbols instead of outlined variants). I did not find this topic in visionOS HIG, however text explicitly states: Prefer filled symbols or icons for consistency with the platform. It is possible that such a UI design will change in the future.

    enter image description here

    Nonetheless, you can disable automatic rendering of filled symbols using .environment(\.symbolVariants, .none) modifier.

    TabView(selection: $model.selected) {
    ForEach(ViewModel.SelectionType.allCases) { selType in
        ContentView()
            .environment(model)
            .tag(selType)
            .tabItem {
                Label(selType.title, systemImage: selType.image)
                    .environment(\.symbolVariants, .none)
            }
    }
}