Set AppButton to have an icon using a custom PNG file

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Posts
May 10, 2022 at 20:22 #24703
Cam
Hi! I’m a brand new Felgo user, and I’m trying to something pretty simple I’m just not sure why it isn’t working.

I’ve added a png file to my assets folder and it shows up in Qt Creator. It’s a play button icon that I want to put on an AppButton on my main page.

Here’s what my AppButton has so far:
```
AppButton {
```
```
                icon: "../assets/playButton.png"
```
```
                //text: "Go!"
```
```
                backgroundColor: "green"
```
```
                backgroundColorPressed: "darkgreen"
```
```
                minimumWidth: 256
```
```
                minimumHeight: 256
```
```
                anchors.horizontalCenter: parent.horizontalCenter
```
```
            }
```
Right now my image does not show up, it just puts the text of the filepath in the button instead.

Any help would be great. Thanks!
May 10, 2022 at 22:48 #24704

Cam

Follow up question, I noticed with this code my buttons aren’t changing colors on IOS. What up with this?

May 11, 2022 at 14:31 #24706
Bence
Felgo Team
Hi Cam!

As the easiest solution, you could use one of the available icons included in Felgo. In that case you would set the icon property like:
```
icon: IconType.play
```
If you would like to use a custom image instead, you can override the leftItem or the rightItem property of the AppButton and add an Image component there:
```
AppButton {
  leftItem: Image {
              source: "../assets/playButton.png"
            }
  text: "Play"
  flat: false
}
```
Finally, for the button to have a background on iOS, you need to set the flat property to false (as shown above).

Hope this helps!

Best,

Bence