How it works
TitleAndIconLabelStyle is the LabelStyle that renders a Label with both its title and its icon, the icon leading the text. Because a Label carries a title and an image but defers its appearance to the surrounding style, you reach for this style when you want to guarantee that both halves are shown together — regardless of a context that might otherwise hide one. You apply it through the .titleAndIcon static accessor on labelStyle(_:), making it the explicit counterpart to the icon-only and title-only styles.
Build the label from a title and a system image
A
Labelpairs a text title with an icon; the style decides which parts appear. HereLabel("Downloads", systemImage: "arrow.down.circle.fill")supplies both, givingTitleAndIconLabelStyletwo elements to lay out side by side.Select the style with .labelStyle(.titleAndIcon)
The
labelStyle(_:)modifier sets the label style for a view. Passing the.titleAndIconshorthand resolves to aTitleAndIconLabelStyleinstance, as in.labelStyle(.titleAndIcon), so the label always shows the icon followed by the title.Rely on the standard icon-then-title layout
TitleAndIconLabelStylecomposes the icon and title in a horizontal arrangement with the system's default spacing — you don't size or order them yourself. BothLabel("Downloads", ...)andLabel("Favorites", systemImage: "star.fill")adopt that identical arrangement once the style is applied.Tune appearance with ordinary view modifiers
Because the style only governs composition, you shape color and size with the usual modifiers.
.foregroundStyle(.orange)on the Favorites label tints both its icon and text, and.font(.title3)on the enclosing stack scales every styled label together.
.labelStyle(.titleAndIcon) to .labelStyle(.iconOnly) and watch its text disappear while the title-and-icon label beside it keeps showing both.Example & preview
Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.
struct TitleAndIconLabelStyleDemo: View {
var body: some View {
VStack(alignment: .leading, spacing: 16) {
Label("Downloads", systemImage: "arrow.down.circle.fill")
.labelStyle(.titleAndIcon)
Label("Favorites", systemImage: "star.fill")
.labelStyle(.titleAndIcon)
.foregroundStyle(.orange)
}
.font(.title3)
.padding()
}
}