Square inline button based on element height - html

Question

I'm trying to accomplish a dynamic button which is always square, and based on the height of the text it is with. Something like this:
Basically the icon stays the same, but the size of the box varies, based on what size of text it is next to. The icon should be centered vertically and horizontally. To get it to look like the image, I had to manually put in everything, but I want it to work whether the font-size is 20px, 70px, or anything else. Basically, I don't know the height, but it should work is the goal, and that seems to be what is different in this question from others around the site/web.
This is the HTML code:
<!-- This may be any font size, but the result should be like the image above. -->
<div id="name">
<!-- This holds the text -->
<span>Amy</span>
<!-- This holds the image, and the anchor is the box. -->
<img src="/images/edit.png" alt="Edit Name" />
</div>
I've tried following this tutorial, but I can't get it to work for some reason. Everything I've tried (which is too many things to enumerate here) either gives me the right height, but wrong width, the exact size of the image, or the image as the size of the square.
Is this possible with just CSS, or am I going to have to resort to JavaScript?
Thanks.

Answer 1

Something like this should do it. You may have to change the size a little depending on the font. Also, you may have to vertical-align it.
.edit {
display: inline-block;
width: 1em;
height: 1em;
}
.edit img {
display: block;
}

Answer 2

DEMO
HTML:
<button>
<h2 id="name">
<span>Amy<a href="#" class="edit">
<img src="/images/edit.png" alt="Edit Name" /></a></span>
</h2>
</button>
CSS:
button img {
vertical-align: middle;
}
h2 {
font-size:20pt;
}
Is this what you want?