Image with href binding won't work

Question

I have this and it works (It show link with text and icon):

  <tr>
       <th>
         <a href=";" data-bind="click: sortReport.bind($data, 'byDate') "> Date 
           <img src='@Url.Content("~/assets/images/icons/sort_asc.png")'  />
         </a>
       </th>
  </tr>

But this won't show icon (if I remove text: $data.Name, it will show icon):

       <thead>
        <tr data-bind="foreach: tableHeaderNames">    
          <th> 
             <a href=";" data-bind="text: $data.Name, click: $parent.sortReport.bind($data, 'byDate') "> 
                <img src='@Url.Content("~/assets/images/icons/sort_asc.png")' />
             </a>                                     
           </th>
         </tr>
       </thead>          

What can I do? (tnx)

Answer 1

Why can't you just use a class for the icon?

Or could you do something like this?

   <thead>
    <tr data-bind="foreach: tableHeaderNames">    
      <th> 
         <a href=";" data-bind="click: $parent.sortReport.bind($data, 'byDate') "> 
            <img src='@Url.Content("~/assets/images/icons/sort_asc.png")' />
            <span data-bind="text: $data.Name"></span>
         </a>                                     
       </th>
     </tr>
   </thead>