How to place SFSymbol within Text SwiftUI View along with String?

Question

This is how i use it in code:

@State var selectedType: BiblePlanOffsetType = .verse
@State var types = [BiblePlanOffsetType.verse, .chapter]

Picker("", selection: $selectedType) {
    ForEach(types, id: \.self) { elem in
        Text(elem.title)
    }
}
.pickerStyle(.segmented)

enum BiblePlanOffsetType: Int16, CaseIterable {
    case verse = 0
    case chapter = 1
        
    var title: String {
        switch self {
        case .verse:
            return "\(Image(systemName: "quote.opening")) " + "verses".localized
        case .chapter:
            return "\(Image(systemName: "text.quote")) " + "chapters".localized
        }
    }
}

Why it results with no icon displayed?

According to this article, it should work.

I believe that your current enum is returning string instead of view. — Ranadip Dutta
– Ranadip Dutta, Commented Aug 28 at 11:17
See also How to set SF Symbol Color within a Text String (iOS 26) — Benzy Neez
– Benzy Neez, Commented Aug 28 at 11:52
See my answer here: stackoverflow.com/questions/79198468/… — koen
– koen, Commented Aug 28 at 12:33

Sweeper · Accepted Answer · 2025-08-28 15:03:16Z

0

title should be a LocalizedStringKey. You can directly use Images as part of its string interpolation:

var title: LocalizedStringKey {
    switch self {
    case .verse:
        return "\(Image(systemName: "quote.opening")) verses"
    case .chapter:
        return "\(Image(systemName: "text.quote")) chapters"
    }
}

Now you don't even need your own .localized. Note that the localisation keys are %@ verses and %@ chapters, so change your xcstrings accordingly.

If you want to use your own .localized for some reason (you really shouldn't), title could return a Text,

var title: Text {
    switch self {
    case .verse:
        return Text(Image(systemName: "quote.opening")) + Text("verses".localized)
    case .chapter:
        return Text(Image(systemName: "text.quote")) + Text("chapters".localized)
    }
}

That said, a segmented Picker does not support displaying Image + Text. It's got to be image only or text only. You can use an ImageRenderer to combine the image and text into one Image as a workaround, or design your own picker. See more details in this question.

edited Aug 28 at 15:03

answered Aug 28 at 11:25

Sweeper

291k23 gold badges260 silver badges437 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Andrei G. Aug 28 at 14:45

I don't think the SF symbol will actually render in the segmented Picker. Have you tested this? From what I know, you can show a symbol only using .palette style, but not both text and symbol.

Sweeper Aug 28 at 15:04

@AndreiG. You're right. I disregarded the context. If the question is ultimately asking "how to use image + text in a segmented picker" though, this would be a duplicate of this.

Collectives™ on Stack Overflow

How to place SFSymbol within Text SwiftUI View along with String?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related