Javascrpt generated icon has width of tag text

[kez-kuehl]

This:

var materialicon = document.createElement('i');
    materialicon.classList.add('material-icons');
var icon_check = materialicon.cloneNode(true);
    icon_check.innerHTML = 'check';
var button_delete = document.createElement('a');
    button_delete.classList.add('btn');
    button_delete.classList.add('waves-effect');
    button_delete.classList.add('waves-light'); 
    button_delete.append(icon_delete);

Results in:

<a class="btn waves-effect waves-light delete">
  <i class="material-icons">icon_delete</i>
</a>

Which is correct, but the button has the width of the text "icon_delete".

[acburst]

I'm not sure what you are trying to achieve. Can you make a codepen?

[kez-kuehl]

Written HTML works, programmatic via JS, which has the same endresult, doesn't. It then takes the width of text content "icon_delete"