2

I created a UIButton in Interface Builder that consists of only an SF Symbol and no text. The button draws with insets around the image, which affects how it's positioned with constraints. How do I remove that extra space, so that the button view is just the size of the SF Symbol image?

enter image description here

Curiosity
  • 544
  • 1
  • 15
  • 29
  • 1
    Does this answer your question? [Change a SF Symbol size inside a UIButton](https://stackoverflow.com/questions/60641048/change-a-sf-symbol-size-inside-a-uibutton) – Kirow Oct 07 '21 at 11:30
  • Unfortunately that has the same issue where the button doesn't take on the intrinsic size of the SF Symbol. – Curiosity Oct 07 '21 at 16:42

1 Answers1

1

Button with the intrinsic size of the Image

Image

A button will take the size of the image by default. but since SF-Symbols are vectors, they can be scaled to any size. Each symbol has a few predefined sizes that you can choose:

predefined Sizes

Also, you can set your own size in the code:

let config = UIImage.SymbolConfiguration(pointSize: 160, weight: .bold, scale: .large)
       
let largeChevronImage = UIImage(systemName: "chevron.right.circle.fill", withConfiguration: config)

button.setImage(largeChevronImage, for: .normal)

Add or Remove Extra space around the image

Some images and SF-Symbols have some paddings around their content. You can control the size of the padding by setting the ContentEdgeInsets

Offset

You can clip the bounds to hide the out of frame content

All SF-Symbols have same size

Mojtaba Hosseini
  • 95,414
  • 31
  • 268
  • 278