Adding an icon to a Button in Xamarin Forms

Screen Shot 2019-03-24 at 2.09.11 PM
Share on facebook
Share on twitter
Share on linkedin

To achieve this we are going have to set the ContentLayout and Image properties from the Button we want to customize. Let’s just jump right into it.

Here is the XAML

Here is in C#

This is pretty straight forward but I’m going to explain what we are doing. The Image property takes the name of an image resource, that’s going to be the icon for our button. You must add the image on each platform accordingly and remember to include the different sizes for each dpi/screen size for better visuals.

The ContentLayout property has two values separated by a comma. First is the position we want the image to appear in defined by the ImagePosition enumerator we can set the image to the Top, Left, Right or Bottom of the button. The second parameter is the space we want between the button text and the icon.

In the end you will end up with something like the following

All four positions of button/text. The iOS version is on the left and the android version on the right.

And that’s it, hope you found this useful. See you next time.

Did you like the post and Wanna leave a reply? You can mention me on twitter @eatskolnikov so we can have a conversation about it

Share it with your friends

Share on facebook
Share on twitter
Share on linkedin

Want to get these post in your inbox?

Type your email down here and you will get a weekly digest of the post here

Other articles on the site


Layout safe areas for iOS in Xamarin Forms

Since the launch of the iPhone X there is a notch at the top of the screen on iOS devices that tend to be annoying to work around. You would have to add some sort of margin to avoid your controls to be overlapped by it. The problem with this

Read More »

Image caching in Xamarin Forms

Someone asked me about an issue they were having when showing a ListView that had an image for each cell. When the user would scroll the images would flicker and the UI would turn a bit slow. The images were being loaded from the internet. The problem the person was

Read More »