2

Multicolor SF symbols are black in iOS 15 widget. (have a look at the attached pictures 14.5 vs 15.0)

this is how it looks in the code:

Image(uiImage: UIImage(systemName: getIconName(iconId: iconId))!)
    .resizable()
    .scaledToFit()
    .frame(width: 20)

Playing around with .renderingMode() doesn't help. I've tried all posible params, but no luck. Only when I set it to .template and set some color, but I need it to be as it was - multicolor.

(It happens on both - iPhone and simulator (tested with beta iOS and beta XCode), I also tried to use new SF symbols, or apply new function available in iOS 15 .symbolRenderingMode() but nothing helped).

iOS 14:

before

iOS 15:

after

Palejandro
  • 2,092
  • 5
  • 26
  • 38
  • 1
    same problem for me on macos 12.beta5, xcode 13.beta5, target ios 15 and macCatalyst. Images in Views. Probably another bug. – workingdog support Ukraine Aug 13 '21 at 08:22
  • 2
    Try to replace the `Image(uiImage: UIImage(systemName: getIconName(iconId: iconId))!)` with `Image(systemName: getIconName(iconId: iconId))`, the native SwiftUI implementation of system images. – J-- Aug 13 '21 at 09:29

2 Answers2

3

iOS 15+

The name of some of the symbols has been changed. Ensure that you use the correct name.

You need to use .symbolRenderingMode(.palette) and set the color of each of its layers explicitly using .foregroundStyle() view modifier

         Image(systemName: "cloud.sun.fill")
                .symbolRenderingMode(.palette)
                .foregroundStyle(.black, .yellow)

Use

Image(systemName:getIconName(iconId: iconId))

instead of

Image(uiImage: UIImage(systemName: getIconName(iconId: iconId))!)
mahan
  • 12,366
  • 5
  • 48
  • 83
  • combination of Image(systemName:getIconName(iconId: iconId)) and .symbolRenderingMode(.multicolor) did the trick. thank you – Palejandro Aug 14 '21 at 12:31
0

iOS 16+

Maybe the solution by @mahan worked on iOS 15, but it didn't work for me on iOS 16+. I have found a working combination though:

  1. .symbolRenderingMode(.multicolor)
  2. It works only with <IMAGE_ID>.fill icons. If you try to use non-fill variant, it won't work.

Enjoy!

P.S. Note, that not all the SF icons have fill-version, so you might want to make sure it exists before displaying it.

Dmytro Titov
  • 2,802
  • 6
  • 38
  • 60