HTML / CSS How to add image icon to input type=“button”?

Question

I\'m using the below CSS, but it puts an image in the center of the button. Any way to left or right align an icon using , so that

Answer 1

This works well for me, and I'm handling hover and click CSS as well (by changing background color):

HTML (here showing 2 images, image1 on top of image2):

CSS (my images are 32px X 32px, so I gave them 4px for padding and a 5px border rounding):

.iconButton {
    width: 36px;
    height: 36px;
    background-color: #000000;
    background-position: center;
    background-repeat: no-repeat;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    outline: none;
}

.iconButton:hover {
    background-color: #303030;
}

.iconButton:active {
    background-color: #606060;
}

button::-moz-focus-inner {
    border: 0;
}