function styleButton(button,checked){
    if(checked){
        button.style.border='5px solid black';
    }
    else{
        button.style.border='0px solid black';
    }
}

function addCategoryButton(buttonsDiv, type){
    var btn = document.createElement("BUTTON");
    btn.className = 'button';
    btn.innerText=type.name;
    btn.id=type.type;
    btn.addEventListener("click", function(){setCategory(type.type)},false);
    var btnNext = document.getElementById('btnNext');
    buttonsDiv.insertBefore(btn,btnNext);
}

function addCategoryButtons(categories, types){
    var buttonsDiv = document.getElementById("buttons");

    for (var i = 0; i < categories.length; i++) {
        for (var j= 0; j < types.length; j++)
        {
            if (types[j].type === categories[i]){
                addCategoryButton(buttonsDiv, types[j]);
            }
        }
        //TODO fallback projectType not found...
    }
}

function styleCategoryButtons(categories,category){
    for (var i = 0; i < categories.length; i++) {
        var btn = document.getElementById(categories[i]);
        styleButton(btn, categories[i] === category);
    }
}


@@ -308,17 +308,19 @@
 nnerText
-=
+ = 
 type.nam
@@ -332,17 +332,19 @@
   btn.id
-=
+ = 
 type.typ
@@ -346,16 +346,201 @@
 e.type;%0A
+    btn.style.backgroundImage = %22url('images/%22 + type.icon +%22')%22;%0A    btn.style.backgroundRepeat =  %22no-repeat%22;%0A    btn.style.backgroundSize = %2220px%22;%0A    btn.style.color = %22#0000ff%22;%0A
     btn.

Add icon dinamically to the button, based on the projecttype