SwiftUI Label text and image vertically misaligned

Question

I'm using SwiftUI's brand new Label View, running Xcode 12 beta on Big Sur.

As image I use SF Symbol and found an image named "play". But I've noticed the same problem with custom images without any bordering pixels (i.e. spacing is not caused by the image), e.g. PDF icons, so it is probably not related to the image.

In demos by Apple the Text and the image should just automatically align properly, but I do not see that.

struct ContentView: View {
    var body: some View {
        Label("Play", systemImage: "play")
    }
}

Results in this:

Any ideas why the image (icon) and the text is vertically misaligned?

If we give the Button a background color we see more precisely the misalignment:

Label("Play", systemImage: "play")
    .background(Color.red)

Results in this:

I have noticed this too. It might be an issue with SF Symbols, and we may need to wait for SF Symbols 2. Or it could be an issue with the beta. — Andrew, Jun 24 '20 at 13:39
Same issue with non-SF Symbols icons, just tried a PDF icon I've used in other projects, will add that detail to the question... — Sajjon, Jun 24 '20 at 13:45

score 13 · Accepted Answer · edited Aug 23 '22 at 08:43

Probably a bug, so worth submitting feedback to Apple. Meanwhile here is working solution based on custom label style.

Tested with Xcode 12b

struct CenteredLabelStyle: LabelStyle {
    func makeBody(configuration: Configuration) -> some View {
        HStack {
            configuration.icon
            configuration.title
        }
    }
}

struct TestLabelMisalignment: View {
    var body: some View {
        Label("Play", systemImage: "play")
           .labelStyle(CenteredLabelStyle())
    }
}

score -2 · Answer 2 · answered Jul 05 '20 at 11:56

-2

@Sajjon You can add a custom View as a workaround and use Image with Text inside a HStack

answered Jul 05 '20 at 11:56

user2731717

75
2
3

SwiftUI Label text and image vertically misaligned

2 Answers2

Linked