Can someone show me how to add different colors to each SF Symbol?

Image(systemName: shoppingListProducts.contains(product) ? "checklist.checked" : "checklist.unchecked")

I have tried the following...

Image(systemName: shoppingListProducts.contains(product) ? ("checklist.checked", foregroundStyle(Color.green)) : "checklist.unchecked", foregroundStyle(Color.red)))

Image(systemName: shoppingListProducts.contains(product) ? "checklist.checked" : "checklist.unchecked")
    .foregroundStyle( shoppingListProducts.contains(product) ? Color.green : Color.red))

Thanks in advance...

Have a GR8 weekend!

@twoStraws wrote a great article. His explanation is much better than what I could write in a forum response.

What part of this article gave you cramps?

See-> Adding Colour to SFSymbols

For your consideration. Code like this:

Image(systemName: shoppingListProducts.contains(product) ? "checklist.checked" : "checklist.unchecked")
    .foregroundStyle( shoppingListProducts.contains(product) ? Color.green : Color.red))

This code is just begging you to create a computed property. A computed property would allow you to declare exactly what you'd like to see in the view. Instead, you have this code that makes your team pause, and wonder.

Computed Property

This might be pseudocode.

// declare the icon -- this returns the properListIcon for your view.
var properListIcon: Image {
    Image(systemName: shoppingListProducts.contains(product) ? "checklist.checked" : "checklist.unchecked")
}

Now, in your view code, you simply declare what you want to display. You want to display the properListIcon.

struct ProductCell: View {
    // ... data model stuff....

    var body: some View {
    // ...snip....
    properListIcon // <-- Note you're declaring what you want to see in the view. Tuck the logic into your data model.
    // ...snip....
    }
}

or... we can just give you the answer. Like this....

This should work if you remove the extra ) at the end.

Image(systemName: shoppingListProducts.contains(product) ? "checklist.checked" : "checklist.unchecked")
    .foregroundStyle( shoppingListProducts.contains(product) ? Color.green : Color.red)) // <- Extra ) at the end remove this

PS You can also remove Color and just leave .green and .red

However I would take it out like

func image(for product: String) -> some View {
    Image(systemName: shoppingListProducts.contains(product) ? "checklist.checked" : "checklist.unchecked")
        .foregroundStyle(shoppingListProducts.contains(product) ? .green : .red)
}

Then you can do this in your View

image(for: product)

@Obelix

Thank you for putting it in broader context. makes it much easier to comprehend!

Most responders assume that you know where everything need sto go rather than giving out pointers :)