how to hide sorting icon from DataTables header at first time

just remove sorting class from datatable on initComplete that is

sorting_asc
sorting

Ex.

<script type="text/javascript">
//Datatable for search and sorting
    var table = $('.table').DataTable({
        "fixedHeader": false,
        "lengthChange": false,
        "bPaginate": false,
        "responsive": true,
        "autoWidth": false,
        "scrollY": "300px",
        "scrollCollapse": true,
        "paging": false,

        initComplete: function (settings, json) {
            this.api().columns().header().each(function (th) {
                $(th).removeClass("sorting_asc");
                $(th).removeClass("sorting");
            }
         )
        },
    });       

That is first time disable all sorting icon from table, after click on header it will allow sorting and show all icon

Thank you

You cannot in pure CSS. The icon appearances is based on classes injected by the plugin, not some CSS logic. But you can add an overruling class definition to each header:

table.dataTable thead .sorting_pre {
  background-image: none;
}

var table = $('#example').DataTable({
  initComplete: function() {
    this.api().columns().header().each(function(th) {
      $(th).addClass('sorting_pre')
    })
  }
})

and then remove that class first time the user is ordering / sorting the table:

table.one('order.dt', function() {
  table.columns().header().each(function(th) {
    $(th).removeClass('sorting_pre')
  })
})

as in this demo -> http://jsfiddle.net/wvo98420/

Note: This solution is targeting DT latest / 1.10.19. When using styling plugins (i.e bootstrap and so on) different steps may be required.

You can do it in jquery.

assuming structure is

    $('.header').on('click',function(){
       $('.icons').removeClass('hide-class');
    });

 .hide-class{
       display: none;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
      <ul>header (click here)
        <li class="icons hide-class">Name</li>
        <li class="icons hide-class">Address</li>
      </ul>
    </div>