SF Symbols Multicolored icons

Question

Im making an app with weather icons, and i wanted to use apple's SF Symbols! At WWDC2020 they released multicolred ones.

So my question is, why are my icons appearing in black like so:

I have set the rendering mode to alwaysOriginal. And it does nothing. If i set it to template it becomes blue, like the default tint color.

currentConditionImageView.image = UIImage(systemName: "cloud.sun.fill")!.withRenderingMode(.alwaysOriginal)

But according to the SF Symbols app, the symbol should look like this:

Has anyone encountered this Problem, and how did you solve it? Im looking forward to your answers!

Answer 1

The rule is:

In a template environment, such as a button, if you apply the .alwaysOriginal rendering mode to a multicolor symbol image, its inherent colors will appear.

But an image view is not a template environment. Try making this image the image (not the background image) of a UIButton.

If you put a multicolored image in a non-template environment, like an image view, you are basically misusing it if you make it .alwaysOriginal. You should just make it .alwaysTemplate and accept it as a monochrome image adopting the tint color.

Answer 2

It is possible to create a multicolored SF Symbol for use in a non-template environment like UIImageView.

For a white checkmark on a green background, for example:

Try this:

let config = UIImage.SymbolConfiguration(paletteColors: [.white, UIColor.green])
  
let multicolorCheckmarkImage = UIImage(systemName: "checkmark.circle.fill")?.withConfiguration(config)
        
self.checkmarkImageView.image = multicolorCheckmarkImage