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)
}
}