Aurelia Icon Attribute

icon.ts

import {autoinject, bindable, bindingMode} from 'aurelia-framework';

/***
* created to : attach custom font-awesome class name to icon 
* renders font-awsome class named based on parameters extension and type 
* both parameters are required, always

*
* if you only need to bind a signle paremter, use the single value binding approach instead because its cleaner
* http://aurelia.io/hub.html#/doc/article/aurelia/templating/latest/templating-custom-attributes/4
*
* implemented here:
* https://gist.github.com/monkeyhouse/9a747f654c312dd4b18053cb83bcbb36
***/
@autoinject()
export class IconCustomAttribute {

  @bindable({ defaultBindingMode: bindingMode.oneTime})
  type;

  @bindable({ defaultBindingMode: bindingMode.oneTime})
  extension;

  constructor(private element: Element) { }

  typeChanged(newValue, oldValue) {
     this.setElementClass();
  }

  extensionChanged( newValue, oldValue ){
    this.setElementClass();
  }

  setElementClass(){
    if ( this.type !== undefined
      && this.extension !== undefined){
        
      let style = IconCustomAttribute.getStyle(this.type, this.extension);      
      this.element.classList.add( style );
    }
  }

  static getStyle( type : string, extension : string ) : string {
    switch( type ){
      case 'folder':
        return 'fa-folder-o';

      // case 'monkeys'
      // case 'houses'

      case 'file':

        switch( extension ){
          
            case 'jpeg':
            case 'jpg':
            case 'png':
            case 'gif':
                return 'fa-file-image-o';
            case 'xls':
            case 'xlsx':
                return 'fa-file-excel-o';
            case 'doc':
            case 'docx':
                return 'fa-file-word-o';
            case 'ppt':
            case 'pptx':
                return 'fa-file-powerpoint-o';
            case 'zip':
            case 'rar':
            case 'tar':
            case 'bz2':
            case 'xz':
            case 'gz':
                return 'fa-file-archive-o';
            case 'mp3':
                return 'fa-file-audio-o';
            case 'avi':
            case 'mov':
                return 'fa-file-video-o';
            case 'php':
            case 'html':
            case 'css':
                return 'fa-file-code-o';
            case 'pdf':
                return 'fa-file-pdf-o';                
            default:
              return 'fa-file-o';
        }
      default:
      return 'fa-question';
    }
  }
}

page.html

<template>
  <i class="fa fa-5x" icon="type.bind: 'file'; extension.bind: 'xls'"></i>
</template>