CODEWITHSUNDEEP
iosswiftswiftui
Farhandika
Farhandika

Reputation: 507

SF Symbol Not Showing on a button in swiftUI

I am very new at IOS dev, this is my day one. so I have been playing with SF symbols and tried to add it into a button, but somehow it doesn't appear at the button

The Bug

The color should be black and it should've appear on the button. Perhaps I made a beginner mistake, but still don't know ho two fix it. so what did I do wrong?

struct ButtonBig: View {
    var ButtonText:String
    var ButtonIcon:String
    var body: some View {
        ZStack{
        RoundedRectangle(cornerRadius: 25.0)
            .frame(width:117, height: 112.36, alignment:.center)
            .foregroundColor(.blue)
            VStack{
                Image(systemName: ButtonIcon).padding()
                Text(ButtonText).foregroundColor(.white)
            }
        }
    }
}
}

Button(action: ) {
                        ButtonBig(ButtonText: "Button3",ButtonIcon: "calendar")
                    }

Upvotes: 1

Views: 2615

Answers (2)

Hardik Shekhat
Hardik Shekhat

Reputation: 1888

You can do it by overlaying your button image and text on the RoundedRectangle shape view like below :

struct ButtonBig: View {

    var ButtonText:String
    var ButtonIcon:String

    var body: some View {

        ZStack {

            RoundedRectangle(cornerRadius: 25.0)
                .frame(width:117, height: 112.36, alignment:.center)
                .foregroundColor(.blue)
                .overlay(
                    VStack{
                        Image(systemName: ButtonIcon).renderingMode(.original).padding()
                        Text(ButtonText).foregroundColor(.white)
                    }
                 )
        }
    }
}

Or you can also do it by just setting the button style directly to HStack of the button.

HStack {
       Button(action: {
       }, label: {
           ButtonBig(ButtonText: "Button1",ButtonIcon: "calendar")
       })
                
       Button(action: {
       }, label: {
           ButtonBig(ButtonText: "Button2",ButtonIcon: "calendar")
       })
                
       Button(action: {
       }, label: {
           ButtonBig(ButtonText: "Button3",ButtonIcon: "calendar")
       })

}.buttonStyle(PlainButtonStyle()) //Set the button style to HStack instead of each button

Upvotes: 0

Raja Kishan
Raja Kishan

Reputation: 19044

Add button style to PlainButtonStyle()

Button(action: ) {
    ButtonBig(ButtonText: "Button3",ButtonIcon: "calendar")
}.buttonStyle(PlainButtonStyle()) //<-- Here

Or you can set renderingMode mode to original.

// Other code
VStack{
    Image(systemName: ButtonIcon).renderingMode(.original).padding() //<--- Here
    Text(ButtonText).foregroundColor(.white)
}
// Other code

Upvotes: 1

Related Questions