Change a SF Symbol size inside a UIButton

Question

I am declaring a Button like this :

let menuButton = UIButton()

After that I am trying to change it's parameter and set his position on the view with the help of LBTATools (a pod) with this function:

fileprivate func setMenuButtonUI() {
        menuButton.setImage(UIImage(systemName: "line.horizontal.3.decrease.circle.fill"), for: .normal)
        view.addSubview(menuButton)
        menuButton.anchor(top: view.safeAreaLayoutGuide.topAnchor, leading: view.leadingAnchor, bottom: nil, trailing: nil, padding: .init(top: 20, left: 60, bottom: 0, right: 0), size: .init(width: 40, height: 40))
        menuButton.setupShadow(opacity: 1, radius: 5, offset: .zero, color: .darkGray)
        menuButton.tintColor = .red
    }

Everything is working well, I get the right color, position and even size. Only problem is it's size, I cannot change it with all the usual methods like menuButton.imageView?.contentMode = .scaleAspectFit etc..

Probably it comes from the fact that it is a SF Symbol and not a normal image.

The help of someone would be really appreciated.

Thanks

score 157 · Accepted Answer · edited Sep 23 '21 at 17:05

157

You can do it using SymbolConfiguration like in the sample code below:

let largeConfig = UIImage.SymbolConfiguration(pointSize: 140, weight: .bold, scale: .large)
       
let largeBoldDoc = UIImage(systemName: "doc.circle.fill", withConfiguration: largeConfig)

button.setImage(largeBoldDoc, for: .normal)

edited Sep 23 '21 at 17:05

pkamb

33,281
23
160
191

answered Mar 11 '20 at 17:23

Jawad Ali

13,556
3
32
49

This is really nice when using SF symbol in UIButton. While it is tricky to use imageEdgeInsets to change the image size in UIButton. – Zhou Haibo May 13 '21 at 14:35
1

It's not centered, as I can see. – surfrider Sep 02 '21 at 14:37
2

Its not centered because the x is 100 and the y is 200 – Kyle Browning May 05 '22 at 20:11

score 15 · Answer 2 · answered Jun 14 '22 at 12:18

The iOS 15 and Swift 5 solution would be:

var config = UIButton.Configuration.plain() // Change style with e.g. `.filled()`
config.title = "Title of the UIButton"
config.image = UIImage(systemName: "line.horizontal.3.decrease.circle.fill",
                                   withConfiguration: UIImage.SymbolConfiguration(scale: .small)) // Change the scale here
config.imagePadding = 4 // Padding between image and title
            
let menuButton = UIButton()
menuButton.configuration = config

priceless answer, I had no idea it was changed that way. thanks, bountied! — Fattie, Aug 10 '22 at 13:38

score 5 · Answer 3 · answered Dec 01 '21 at 11:54

Objective C:

UIImageSymbolConfiguration * configuration = [UIImageSymbolConfiguration configurationWithPointSize:30 weight:UIImageSymbolWeightBold scale:UIImageSymbolScaleLarge];
UIImage * image = [UIImage systemImageNamed:@"" withConfiguration:configuration];
[_btn setImage:image forState:UIControlStateNormal];

Change a SF Symbol size inside a UIButton

3 Answers3

Linked