Enter jQuery… and voila!

• Word Document
• Excel Document
• PowerPoint Document
• PDF Document
• Zip File Link

The html looks like this:

<ul id="docsList">
  <li><a href="#document.doc">Word Document</a></li>
  <li><a href="#Excel-file.xls">Excel Document</a></li>
  <li><a href="#Powerpoint-pres.ppt">PowerPoint Document</a></li>
  <li><a href="#somefile.pdf">PDF Document</a></li>
  <li><a href="#Archive.zip">Zip File Link</a></li>
</ul>

The Javascript looks like this:

jQuery(document).ready(function() {
$('.docs a').attr('href');
// Word doc
$('a[href$=".doc"]').addClass('doc');
$('a[href$=".docx"]').addClass('doc');
$('a[href$=".docm"]').addClass('doc');
// Excel
$('a[href$=".xls"]').addClass('excel');
$('a[href$=".xlsx"]').addClass('excel');
$('a[href$=".xlsm"]').addClass('excel');
$('a[href$=".xltx"]').addClass('excel');
// PowerPoint
$('a[href$=".ppt"]').addClass('ppt');
$('a[href$=".pptx"]').addClass('ppt');
$('a[href$=".potx"]').addClass('ppt');
$('a[href$=".potm"]').addClass('ppt');
// PDF
$('a[href$=".pdf"]').addClass('pdf');
// ZIP
$('a[href$=".zip"]').addClass('zip');
});

Source code :

Dynamic Document Icons (source code)