I’d like my toolbar item to become badged when it’s active. I thought the best looking way to do this would be with a custom SF Symbol because that matches the rest of my app.
But apparently .toolbar labels ignore your symbol’s text guides? Because they look perfect when I export, but when I switch symbols, they pop up and down:

.toolbar {
ToolbarItem(placement: .topBarTrailing) {
Button {
isFilterSheetPresented = true
} label: {
Image(
systemName: activeFilterCount == 0 ? "tray" : "tray.badge"
)
// .contentTransition(.symbolEffect(.replace))
.symbolRenderingMode(activeFilterCount > 0 ? .palette: .none)
.foregroundStyle(
activeFilterCount > 0 ? Color.accentColor : Color.primary,
Color.primary
)
}
.accessibilityLabel("Filter")
}
}
In my app, I’m using custom symbols:
activeFilterCount==0 ? "custom.line.3.horizontal.decrease" : "custom.line.3.horizontal.decrease.badge"
but tray.badge behaves the same way and it isn’t custom – the badge makes the symbol taller, so the underlying symbol pops down when it’s badged.
I’ve disabled the .contentTransition because that 1. just makes it fade in and out up and down rather than pop, and 2. leads to other hilarity as all the other attributes change at random intervals.
Every AI tool suggests that I wrap it in a frame, but that only prevents my icon changing size from bothering the other parts of the toolbar. I want my symbol to be laid out according to its text guides, not it’s bounding box, and the frame doesn’t fix that at all.
If there is no “correct” answer, I can make it mostly work with custom
.offset(y: activeFilterCount > 0 ? -3.5 : 0)
And eyeballing an offset at every text size, but that seems deeply stupid.
I wish there was a way to use .alignmentGuide() and/or .firstTextBaseline to actually lock it down, but I don’t think those work in toolbars. And I don’t think there’s a way to stick an HStack in there that won’t pop around all the same.
I’m also pushing along trying to make it work with .badge() but that’s not going to be the ideal appearance.