How to implement font-awesome into a input appended through jQuery

Question

I have a row that is created through jQuery via append, which contains a delete button.

Desire Output:

1. Instead of the word "delete" I would like to implement a font-awesome "fa-fa-trash" icon in the button.
2. What is the proper way to implement this?

function dataTable(data) {
  var row = $('<tr id=' + data.id + '/>');
  $('#table').append(row);
  row.append($(
    '<td><input type="submit" class="btn btn-danger" value="Delete" onclick="remove(' +
    data.id + ')"/></td>'));
}

Answer 1

here is my Jsfiddle

<button type="submit" class="btn btn-danger" >Submit<i class='fa fa-trash'></i></button>

time = function datatable(data){

  	table = $("table tbody tr");
    table.append(
    "<td><button type='submit' class='btn btn-danger' >Submit "+data+"<i class='fa fa-trash'></i></button>	</td>"
    );
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<button type="submit" class="btn btn-danger" onclick="time('someid');" >append button to table bruh</button>
<table>
<tbody>
<tr>
  <td>first td without for visible</td>
</tr>
</tbody>
</table>

Answer 2

You just change the input type submit to button

row.append('<td><button class="btn btn-danger" onclick="remove('+data.id+')"><i class="fa fa-trash"></i> delete</buton></td>');