How can I pad an image button?

Hi!

I wish to have a refresh button with padding around the image.

Code (csharp):

1. <ui:Button name="RefreshButton"/>

I added the following css

Code (csharp):

1. #RefreshButton {
2.     height: 16px;
3.     width: 16px;
4.     background-image: resource('d_Refresh');
5.     align-self: flex-end;
6. }
7.  

Which looks fine, except that there is no padding around the image.



But no matter what I try, I have not managed to add padding around the image without stretching it. This is what it ends up looking like if I add padding, or increase the height, width:



Anyone know how to make it look like this (from the Package Manager)?

 

Use the Image element. It has an image inside another VisualElement, which allows for padding.

 

Thanks!