Several symbols from SF Symbols render incompletely when displayed within Widgets on iOS 16. The issue affects only symbols not rendered in the default monochrome mode, and it affects some but not all multicolor symbols. It affects all widget families, including lockscreen widgets. The issue is visible both on devices and simulators. Symbols do render correctly within apps, but not within widgets, neither Home Screen widgets nor Lock Screen widgets.
As an example, the following widget screenshots have both been generated with the same code below. The first image shows how the widget appears on iOS 15, the second on iOS 16.
VStack {
ForEach(["cloud.sun.rain",
"square.3.stack.3d.top.filled",
"bed.double.fill",
"battery.100.bolt",
], id: \.self) { name in
HStack {
Image(systemName:name)
Image(systemName:name).symbolRenderingMode(.hierarchical)
Image(systemName:name).symbolRenderingMode(.multicolor)
Image(systemName:name).symbolRenderingMode(.palette)
.foregroundStyle(.red, .green, .blue)
}
}
}
Has anybody observed the same issue? Do you have a more general workaround?
EDIT 7-Oct-2022: On request of @thedp, here is my workaround for the symbols I need. The result looks ok, but is not ideal. The code sample is incomplete, but I guess the context is understandable. For .accessoryInline
widgets I have another workaround.
@ViewBuilder
var view: some View {
let partial = Image(systemName: base)
.symbolRenderingMode(mode)
switch mode {
case .palette: partial.foregroundStyle(primary, secondary, tertiary)
case .hierarchical, .monochrome: partial.foregroundColor(primary)
case .multicolor: partial
}
}
@ViewBuilder
func widgetView(height: CGFloat) -> some View {
ZStack {
let hierarchical = mode == .hierarchical
switch base {
case "building.2", "testtube.2", "cloud.sun.rain", "square.2.stack.3d.top.filled", "square.3.stack.3d.top.filled":
Image(systemName: base)
.foregroundColor(primary)
if hierarchical {
Image(systemName: base)
.symbolRenderingMode(.hierarchical)
Image(systemName: base)
.symbolRenderingMode(.palette)
.foregroundStyle(.clear, .background, .background)
}
view
case "square.2.stack.3d.bottom.filled", "square.3.stack.3d.bottom.filled":
Image(systemName: base)
.foregroundColor(helperColor)
view
case "square.3.stack.3d.middle.filled":
Image(systemName: "square.3.layers.3d")
.foregroundColor(helperColor)
Image(systemName: "square.3.stack.3d.bottom.filled")
.foregroundStyle(primary, .clear, .clear)
.offset(y: -0.2 * height) // fits approximately
default:
view
}
}
.font(.system(size: height))
}