CODEWITHSUNDEEP
iosswiftuiviewuibuttonsf-symbols
Cublax
Cublax

Reputation: 1409

Change a SF Symbol size inside a UIButton

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

Upvotes: 74

Views: 37227

Answers (4)

Kyle Lu
Kyle Lu

Reputation: 41

Just 3 steps for anyone using Xcode 15 and without diving into code:

  1. Open your storyboard/XIB and click on the UIButton.

  2. Hit up the Attributes inspector and look for the 'Default symbol Configuration’ section.

  3. There's a 'Point Size' field — just punch in the number for how big you want your symbol.

Check out this GIF to see it in action:

enter image description here

Upvotes: 4

Paul Spiesberger
Paul Spiesberger

Reputation: 5770

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

Upvotes: 23

Ofir Malachi
Ofir Malachi

Reputation: 1286

Objective C:

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

Upvotes: 7

Jawad Ali
Jawad Ali

Reputation: 14417

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)

enter image description here

Upvotes: 178

Related Questions