Change color of SF Symbols icons

Question

I have a MenuModel struc used to have a list of icons into a table as a menu:

 var menu: [MenuModel] = [SideMenuModel(icon: (UIImage(systemName: "house.fill")?.withTintColor(.systemRed))!, title: "Home"),...]

Menu appears but icons still white. I am unable to change colors using the.withTintColor option.

I have also try using it directly on func tableView(_ tableView: UITableView, cellForRowAt by:

self.menu[6].icon.withTintColor(.systemRed)

without success.

Answer 1

You can set the image color in a few different ways...

Two options:

if let img = UIImage(systemName: "lock.icloud")?.withTintColor(.systemRed, renderingMode: .alwaysOriginal) {
    imgView.image = img
}

or:

if let img = UIImage(systemName: "lock.icloud") {
    imgView.image = img
}
imgView.tintColor = .systemRed

Here is some example code... using the first method to create a Red image, and the second method to create a Green image:

class ViewController: UIViewController {
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        let imgViewA = UIImageView()
        let imgViewB = UIImageView()

        if let img = UIImage(systemName: "lock.icloud")?.withTintColor(.systemRed, renderingMode: .alwaysOriginal) {
            imgViewA.image = img
        }
        
        if let img = UIImage(systemName: "lock.icloud") {
            imgViewB.image = img
        }
        imgViewB.tintColor = .systemGreen

        imgViewA.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(imgViewA)
        imgViewB.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(imgViewB)

        let g = view.safeAreaLayoutGuide
        NSLayoutConstraint.activate([

            imgViewA.topAnchor.constraint(equalTo: g.topAnchor, constant: 80.0),
            imgViewA.centerXAnchor.constraint(equalTo: g.centerXAnchor, constant: 0.0),
            imgViewA.heightAnchor.constraint(equalToConstant: 80.0),
            imgViewA.widthAnchor.constraint(equalTo: imgViewA.heightAnchor),
            
            imgViewB.topAnchor.constraint(equalTo: imgViewA.bottomAnchor, constant: 20.0),
            imgViewB.centerXAnchor.constraint(equalTo: g.centerXAnchor, constant: 0.0),
            imgViewB.heightAnchor.constraint(equalToConstant: 80.0),
            imgViewB.widthAnchor.constraint(equalTo: imgViewB.heightAnchor),
            
        ])
        
    }
    
}

Result: