jQueryを使って、inputをクリックすることでinputのテキストを修正できるようにしました。
テキストを編集するようにはできたのですが、

編集できるテキストをわかりやすくするために、<td>内に、
icon(<i class="fa fa-pencil>)をつけたのですが、
編集後、icon部分が表示されなくなってしまいます。

編集テキスト後またはテキスト編集しなかった場合に、
再度icon(<i class="fa fa-pencil>)を表示させるにはどのようにしたらよいのでしょうか?

jQuery初心者のため、わかりにくい記述の部分があるかと思いますが、
何卒ご教授のほどよろしくお願いいたします。

なお、スニペットで実行したところ、テキスト編集前の状態でも、<i class="fa fa-pencil>
表示されていませんが、実際には、鉛筆アイコンが表示されます。
編集実効後に鉛筆アイコンが表示されなくなってしまいます。

jQuery(function($){
  $('.input_edit').click(function(){
    //classでonを持っているかチェック
    if(!$(this).hasClass('on')){
      //編集可能時はclassでonをつける
      $(this).addClass('on');
      var txt = $(this).text();
      //テキストをinputのvalueに入れて置き換え
      $(this).html('<input type="text" value="'+txt+'" />');
      //同時にinputにフォーカスをする
      $('.input_edit > input').focus().blur(function(){
        var inputVal = $(this).val();
        //もし空欄だったら空欄にする前の内容に戻す
        if(inputVal===''){
          inputVal = this.defaultValue;
        };
        //編集が終わったらtextで置き換える
        $(this).parent().removeClass('on').text(inputVal);
      });
    };
  });
});
.input_edit:hover {
  background-color:#26a69a;
  opacity: 0.5;
  transition: all  0.5s ease;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="box-body">
   <table class="table table-bordered dataTable table-list screen_width">
    <thead>
      <tr>
        <th>a</th>
        <th>b</th>
      </tr>
    </thead>
    <tbody>
      <tr>
         <td class="input_edit">
           aaa
           <i class="fa fa-pencil pull-right">
           </i>
         </td>
         <td class="input_edit">
           bbb
           <i class="fa fa-pencil pull-right">
           </i>
         </td>
      </tr>
    </tbody>
  </table>
 </div>