UIButton Image + Text IOS

Question

I see very complicated answers, all of them using code. However, if you are using Interface Builder, there is a very easy way to do this:

1. Select the button and set a title and an image. Note that if you set the background instead of the image then the image will be resized if it is smaller than the button.
2. Set the position of both items by changing the edge and insets. You could even control the alignment of both in the Control section.

You could even use the same approach by code, without creating UILabels and UIImages inside as other solutions proposed. Always Keep It Simple!

EDIT: Attached a small example having the 3 things set (title, image and background) with correct insets

I think you are looking for this solution for your problem:

UIButton *_button = [UIButton buttonWithType:UIButtonTypeCustom];
[_button setFrame:CGRectMake(0.f, 0.f, 128.f, 128.f)]; // SET the values for your wishes
[_button setCenter:CGPointMake(128.f, 128.f)]; // SET the values for your wishes
[_button setClipsToBounds:false];
[_button setBackgroundImage:[UIImage imageNamed:@"jquery-mobile-icon.png"] forState:UIControlStateNormal]; // SET the image name for your wishes
[_button setTitle:@"Button" forState:UIControlStateNormal];
[_button.titleLabel setFont:[UIFont systemFontOfSize:24.f]];
[_button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal]; // SET the colour for your wishes
[_button setTitleColor:[UIColor redColor] forState:UIControlStateHighlighted]; // SET the colour for your wishes
[_button setTitleEdgeInsets:UIEdgeInsetsMake(0.f, 0.f, -110.f, 0.f)]; // SET the values for your wishes
[_button addTarget:self action:@selector(buttonTouchedUpInside:) forControlEvents:UIControlEventTouchUpInside]; // you can ADD the action to the button as well like

...the rest of the customisation of the button is your duty now, and don't forget to add the button to your view.

UPDATE #1 and UPDATE #2

or, if you don't need a dynamic button you could add your button to your view in the Interface Builder and you could set the same values at there as well. it is pretty same, but here is this version as well in one simple picture.

you can also see the final result in the Interface Builder as it is on the screenshot.

Xcode-9 and Xcode-10 Apple done few changes regarding Edge Inset now, you can change it under size-inspector.

Please follow below steps:

Step-1: Input text and select image which you want to show:

Step-2: Select button control as per your requirement as shown in below image:

Step-3: Now go-to size inspector and add value as per your requirement:

swift version:

var button = UIButton()

newGameButton.setTitle("Новая игра", for: .normal)
newGameButton.setImage(UIImage(named: "energi"), for: .normal)
newGameButton.backgroundColor = .blue
newGameButton.imageEdgeInsets.left = -50

In my case, I wanted to add UIImage to the right and UILabel to the left. Maybe I can achieve that by writing code (like the above mentioned), but I prefer not to write code and get it done by using the storyboard as much as possible. So this is how did it:

First, write down something in your label box and select an image that you want to show:

And that will create a button looking like this:

Next, look for Semantic and select Force Right-to-Left (If you don't specify anything, then it will show the image to the left and label to the right like the above image):

Finally, you'll see UIImage to the right and UILabel to the left:

To add space between a label and an image, go to the Size inspector and change those values depending on your requirement:

That's it!