UIButton not showing the circle with "i" for .infoLight

Question

For some reason the iOS button standard circle with an "i" in it for .infoLight isn't showing when I run the function below to programmatically add a UIButton (and I do want to do this programmatically rather than in the interface builder) - I'm adding it to a UIPageViewController. I do get a button in the lower left of the screen, and I've set it to .backgroundColor = .lightGray to verify it has been added to the subview & is working (image on the left, below). Any thoughts on the likely very basic thing that I'm missing? Much thanks!

func configureAboutButton() {
    let aboutButtonHeight: CGFloat = 44
    let aboutButtonWidth: CGFloat = 44
    aboutButton = UIButton(type: .infoLight)
    aboutButton.tintColor = UIColor.red
    aboutButton = UIButton(frame: CGRect(x: 0, y: view.frame.height - aboutButtonHeight, width: aboutButtonWidth, height: aboutButtonHeight))
    aboutButton.backgroundColor = .lightGray
    aboutButton.addTarget(self, action: #selector(segueToAboutVC), for: .touchUpInside)
    view.addSubview(aboutButton)
}

Curiously if I add this line just below where I set background color, the image on the right shows (otherwise I get the image on the left).

        aboutButton.setTitle("X", for: .normal)

Answer 1

Problem

After you create your button with aboutButton = UIButton(type: .infoLight)) you create it again with aboutButton = UIButton(frame: CGRect(x: 0, y: view.frame.height - aboutButtonHeight, width: aboutButtonWidth, height: aboutButtonHeight)). Thats why the info icon isn't showing.

Solution

Just set the frame of your button via setting the frame property aboutButton.frame = CGRect(x: 0, y: view.frame.height - aboutButtonHeight, width: aboutButtonWidth, height: aboutButtonHeight) and you can delete aboutButton = UIButton(frame: CGRect(x: 0, y: view.frame.height - aboutButtonHeight, width: aboutButtonWidth, height: aboutButtonHeight)):

func configureAboutButton() {
  let aboutButtonHeight: CGFloat = 44
  let aboutButtonWidth: CGFloat = 44
  aboutButton = UIButton(type: .infoLight)
  aboutButton.tintColor = UIColor.red
  aboutButton.frame = CGRect(x: 0, y: view.frame.height - aboutButtonHeight, width: aboutButtonWidth, height: aboutButtonHeight)
  aboutButton.backgroundColor = .lightGray
  aboutButton.addTarget(self, action: #selector(segueToAboutVC), for: .touchUpInside)
  view.addSubview(aboutButton)
}

Hint

A better solution would be to use one of the auto layout options to set constraints programmatically. In the version below I use Layout Anchors to set the constraints. Advantages of auto layout you can find here for example.

func configureAboutButton() {
  aboutButton = UIButton(type: .infoLight)
  // need to set to false, to set the constraints programmatically
  aboutButton.translatesAutoresizingMaskIntoConstraints = false
  aboutButton.tintColor = UIColor.red
  aboutButton.backgroundColor = .lightGray
  aboutButton.addTarget(self, action: #selector(segueToAboutVC), for: .touchUpInside)
  view.addSubview(aboutButton)

  // set the constraints via Layout Anchors
  // x, y, w, h
  aboutButton.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
  aboutButton.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
  aboutButton.widthAnchor.constraint(equalToConstant: 44).isActive = true
  aboutButton.heightAnchor.constraint(equalToConstant: 44).isActive = true
}