Toolbar symbol rendering does not behave as expected

Question

Created Dec ’24

Replies 1

Boosts 0

Participants 1

Hello everyone, I've been having a bit of trouble with the .symbolRenderingMode(_:) modifier. When trying to apply it to a single button in a toolbar, it does not work at all. The symbol is always rendered as monochrome.

However, I've realised that with this little hack I can achieve the expected results, but this is not ideal.

.toolbar {
    HStack {
        Button("", action: {}) // The hack
        Button("Button", systemImage: "line.3.horizontal.decrease.circle.fill", action: {})
            .symbolRenderingMode(.hierarchical)
            .foregroundStyle(.blue)
    }
}

I've submitted a bug report (FB16129223) but in the meantime, is this my only solution ?

Side note: the foregroundStyle(_:) modifier is ignored as well.

Boost

Answer 1

Raahs OP

Dec ’24

One possible solution seems to be adding the rendering style directly to the image, as such:

Button(action: {}) {
    Image(systemName: "line.3.horizontal.decrease.circle.fill")
      .symbolRenderingMode(.hierarchical)
      .foregroundStyle(.blue)

Credit: this reply in StackOverflow.

0