How do I change the color of an SF Symbols based UIButton embedded in a UIAction?

Question

I'm generating a button with the following code but am unable to successfully change the button's foreground color.

let button = UIButton(
    type: .close,
    primaryAction: UIAction(
        image: UIImage(systemName: "x.circle"),
        handler: { _ in }
    )
)

I've tried

• UIImage(systemName: "x.circle")?.withTintColor(.red)

• UIImage(systemName: "x.circle")?.withTintColor(.systemRed, renderingMode: .alwaysOriginal)

• button.setTitleColor(.systemRed, for: .normal)

• Adding a configuration:

  var config = UIButton.Configuration.borderless()
  config.baseForegroundColor = .systemRed
  button.configuration = config
  

• Using a different symbol variant like: UIImage(systemName: "x.circle.fill")

In this specific scenario I want to change the color of the circular background area of the image only and not the X (crosses) or the button's background. Essentially I want a red filled circle with a gray X (crosses).

So I can get this:

But I want something more like this (with the red limited to inside the circle):

Answer 1

1. Change type from .close to .custom

2. Change UIImage(systemName: "x.circle") to

   UIImage(systemName: "x.circle")?.withTintColor(.systemRed, renderingMode: .alwaysOriginal)