How to create a button with an icon on the right-hand side?

Question

I am trying to put an icon next to a button label.

Problem: Interface Builder puts the button-image not to the right side. So there is still some space next to the (x).

Thanks for your help

enter image description here

that is the same stuff but the text is under the image, you can adjust it for your particular wish: http://stackoverflow.com/questions/11717219/uibutton-image-text-ios/11792816#11792816 — holex, Jul 01 '14 at 12:53

Ashley Mills · Accepted Answer · 2014-07-01T13:09:49.790

You can do this in Interface Builder by setting the title and image insets:

enter image description here

In this case I've set the title right inset to 30 and the image left inset to 80. You can achieve the same in code by setting the UIButton's imageEdgeInset and titleEdgeInset properties. Knowing the size of the UIButton's subviews, you could probably calculate the edge insets using something like this:

CGSize labelWidth = myButton.titleLabel.frame.size.width;
CGSize imageWidth = myButton.imageView.frame.size.width;
myButton.titleEdgeInsets = (UIEdgeInsets){0.0, -imageWidth, 0.0, imageWidth};
myButton.imageEdgeInsets = (UIEdgeInsets){0.0, labelWidth, 0.0, -labelWidth};

score 2 · Answer 2 · edited Feb 10 '20 at 21:04

2

In Xcode 8 you will find those attributes in the Size inspector:

edited Feb 10 '20 at 21:04

shim

9,289
12
69
108

answered May 30 '17 at 09:27

niggeulimann

688
6
15

score 0 · Answer 3 · answered Jul 01 '14 at 12:55

0

enter image description here

select image(if (x) is image) or title (if (x) is simply key) on the window and set left , Right offsets according to your need

answered Jul 01 '14 at 12:55

Suhail kalathil

2,673
1
13
12

score -1 · Answer 4 · answered Feb 23 '21 at 06:34

i have achieved this:

class CustomButton: UIButton {
    
    open var rightIcon: UIImage? {
        didSet {
            rightIconImage = UIImageView(image: rightIcon?.withRenderingMode(.alwaysTemplate))
            rightIconImage?.tintColor = .white
            if let rightIconImage = rightIconImage {
                addSubview(rightIconImage)
            }
            layoutSubviews()
        }
    }
    
    open override func layoutSubviews() {
        super.layoutSubviews()
        setupRightIconIfNeeded()
    }
    
    func setupRightIconIfNeeded() {
        if let rightIconImage = rightIconImage {
            rightIconImage.translatesAutoresizingMaskIntoConstraints = false
            titleLabel?.translatesAutoresizingMaskIntoConstraints = false
            if let titleLabel = titleLabel, titleLabel.frame.width > 0 {
                let paddingLeft = (frame.width - titleLabel.frame.width - spacing - iconSize) / 2
                NSLayoutConstraint.deactivate(constraints)
                NSLayoutConstraint.deactivate(titleLabel.constraints)
                NSLayoutConstraint.activate([
                    //set height constraint for button
                    heightAnchor.constraint(equalToConstant: apolloSize.height),
                    //set constraint for title label
                    titleLabel.widthAnchor.constraint(equalToConstant: titleLabel.frame.width),
                    titleLabel.heightAnchor.constraint(equalToConstant: titleLabel.frame.height),
                    titleLabel.centerYAnchor.constraint(equalTo: centerYAnchor),
                    titleLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: paddingLeft),
                    //set constraint for right icon
                    rightIconImage.leadingAnchor.constraint(equalTo: titleLabel.trailingAnchor, constant: spacing),
                    rightIconImage.centerYAnchor.constraint(equalTo: titleLabel.centerYAnchor),
                    rightIconImage.widthAnchor.constraint(equalToConstant: iconSize),
                    rightIconImage.heightAnchor.constraint(equalToConstant: iconSize)
                ])
            }
        }
    }
}

How to create a button with an icon on the right-hand side?

4 Answers4