Icon won't center align in button - html

Question

I have a button set up like this:
I cannot for the life of me get the icon to sit in the middle of the button.
This is my CSS:
.buttonclass {
width: 30px;
height: 30px;
border-radius: 20px;
background-color: #1DBE60
}
.iconclass {
width: 20px;
height: 20px;
margin: 7.5px;
}
The only caveat is that I need the margin on the iconclass.
Here's a plunk...
http://plnkr.co/edit/6fLYQlpFmDdf7aWenBtp?p=preview

Answer 1

Setting the image as a background-image is probably your best bet.
If you can't do that then I would probably create a css rule for that .iconclass nested in that .buttonclass since you said you cannot remove the margin from the .iconclass directly.
Something like this:
.buttonclass .iconclass{
margin:0;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);
}
Updated Plunker.

Answer 2

Look into box-sizing, this will help it contain it's content and you can adjust the width/height from there. http://www.w3schools.com/cssref/css3_pr_box-sizing.asp
Works well like this:
.buttonclass {
width: 30px;
height: 30px;
border-radius: 20px;
background-color: #1DBE60;
box-sizing:content-box;
padding:0px;
}
.iconclass {
width: 20px;
height: 20px;
}

Answer 3

I was toggling your CSS file, and I believe this simple solution works...
you could also resize the ewisth of the icon class, but this seems to be what you're looking for if I'm correct
CSS
.buttonclass {
width: 30px;
height: 30px;
text-align: center;
position: relative;
border-radius: 20px;
background-color: #1DBE60
}
.iconclass {
width:15px;
}

Answer 4

Try the following solution (alter only image class)
.iconclass {
width: 20px;
height: 20px;
margin: 3.4px;
position: absolute;
top: 0;
left: 0;
}
It works for me.

Answer 5

Just use margin: 0px -2px -2px -2px; to the .iconclass.