Changing the Image Icon Color in a Label

Once I had the image icon resized to what I wanted I needed to change its color. I found applying a simple .foreground(_) function to the label was not going to cut it. Since I’m using icons I get from Icons8 I needed to indicate to the system the image can be colored. Luckily a quick Google search lead me to this StackOverflow question where the solution was as easy as applying .renderingMode(.template) property.

 /// Create a Label with a custom image which 
 /// can have its color updated using the 
 /// `.foregroundColor(_)` funtion.
struct LabelWithImageIcon: View {
    /// The title which will be passed to the title 
    /// attribute of the Label View.
    let title: String
    /// The name of the image to pass into the 
    /// Label View.
    let image: String
    
    var body: some View {
        Label(title: {
            Text(self.title)
        }, icon: {
            Image(self.image)
                .renderingMode(.template)
        } )
    }
}

struct LabelExtensions_Previews: PreviewProvider {
    static var previews: some View {
        LabelWithImageIcon(title: "Hello World", 
                           image: "icons8-icosahedron")
            .foregroundColor(.orange)
    }
}
Screen+Shot+2020-07-30+at+5.27.44+PM.jpg
Previous
Previous

Another way to use XCode Previews

Next
Next

Resize a custom Image icon in SwiftUI’s Label