SwiftUI changing the color of clear part inside of SF Symbol

Question

I am trying to change the color of clear(transparent) part inside of a SF Symbol called delete.left.fill. So far I've tried is as follows

Button(action: { return }, label: {
                        Image(systemName: "delete.left.fill")
                            .background(Color.black)
                            //.accentColor(.black)
                            .font(.system(size: self.fontSize*0.75))
                    })
                        .frame(width: self.width, height: self.width)
                        .foregroundColor(.lightGray)
                        //.background(Color.black)

When I run the code as above, the result is like

.

At first, the xinside of the symbol was the same color as background. I want it to make black.

1. I tried to set the backgroundColor of the Button and it made whole Button black.
2. I tried to set accentColor of the Image to black. Nothing changed.
3. I tried to set backgroundColor of the Image to black. The result can be seen in the image.

The question is, is there a way to make just that x, inside the symbol, black programmatically?

Rationalism

Answer 1

You could mask the background and apply a custom style:

struct MyButtonStyle: ButtonStyle {
  public func makeBody(configuration: MyButtonStyle.Configuration) -> some View {
    configuration.label
      .compositingGroup()
      .opacity(configuration.isPressed ? 0.5 : 1.0)
  }
}

Button(action: {}) {
  Image(systemName: "delete.left.fill")
    .foregroundColor(.green)
    .background(
      Color.black.mask(Circle())
    )
}.buttonStyle(MyButtonStyle())

The circle may not fit to any usage, but for this image it works okay:

Gauldin

one more question though, it works but when I tap the button effect is working but there is a gray circle behind it and black parts fades to white more than it should do. Any suggestions on that? – Rationalism

Yeah. that's ugly. Sorry for missing out. I update my answer. Now the button should behave nicely when tapped – Gauldin

and the oscar goes to you. yet, how does this compositonGroup() works? – Rationalism

@Rationalism It treats subviews/modifiers as one before applying the modifier. in this case the views of label (= image, foreground, background and color) – Gauldin

Altogether prolly still not the best solution. A better way could be to re-render the image filling all internally clear-color masked pixels with the color you want. But I didn't have the time to get into that. – Gauldin

Well that is enough for me now. If you have the chance for update, it would be appreciated. Thanks for your help. – Rationalism

Answer 2

as of iOS 15 you can simply achieve that with .foregroundStyle(.red, .blue)

Flavorsome

Answer 3

As he warned with the circle, @Faruk's solution didn't work for me with the exclamationmark.triangle.fill

I created a ZStack with the fill and unfill versions to create a yellow triangle with a black exclamation point and a black border:

ZStack{
  Image(systemName: "exclamationmark.triangle")
    .foregroundColor(Color.black)
    .scaleEffect(1.1)
  Image(systemName: "exclamationmark.triangle.fill")
    .foregroundColor(Color.yellow)
}

I've only tried on couple of simulators, but it looks nice on iPadPro and iPad Mini

Koan