FontAwesome4.O

//in head
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">



//in script-----
let create= (x)=> document.createElement(x),
select= (x,y=document)=> y.querySelector(x),
selectAll= (x,y=document)=> y.querySelectorAll(x);

//Styled in css as i{color: green; font-size: 20px} etc

let icons= {
"folder" : "&#xf114;",
"file" : "&#xf016;",
"code" : "&#xf1c9;",
"text" : "&#xf0f6;",
"pdf" : "&#xf1c1;",
"excel" : "&#xf1c3;",
"word" : "&#xf1c2;",
"powerpoint" : "&#xf1c4;",
"photo" : "&#xf1c5;",
"audio" : "&#xf1c7;",
"video" : "&#xf1c8;",
"archive" : "&#xf1c6;"
};


function addIcon(file,regex,x){
if(regex.test(file.text)){
let firstcol= file.closest("td").previousElementSibling;
firstcol.innerHTML= `<i class="fa ${x}">${icons[x]}</i>`;
}
return;
}


let name= selectAll("td:nth-child(2)>a");
name.forEach(i=>{
addIcon(i,/.+/,"file");
addIcon(i,/\/$/,"folder");
addIcon(i,/\.(html|js|css)$/,"code");
addIcon(i,/\.txt$/,"text");
addIcon(i,/\.(jpg|png|gif|svg)$/,"photo");
addIcon(i,/\.(mp3|aac|m4a)$/,"audio");
addIcon(i,/\.(mp4|mov|wav|flv)$/,"video");
addIcon(i,/\.(zip|rar|7z)$/,"archive");
addIcon(i,/\.pdf$/,"pdf");
addIcon(i,/\.(doc|docx)$/,"word");
addIcon(i,/\.(ppt|pptx)$/,"powerpoint");
addIcon(i,/\.(xls|xlsx)$/,"excel");
});