Search code examples
iosswiftxcodesf-symbols

SF Symbols Multicolored icons

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:

enter image description here

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:

enter image description here

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

Solution

  • 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.

    enter image description here

    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.

    enter image description here