Why can't I assign an element's class via data binding?

Question

I am creating a custom element that represents a piece of contact media to put on my personal website. A working example of the element looks like this:

The Idea is that I can pass in the title, value, and Font Awesome Icon class as strings.

The thing is, the Font Awesome Icon class is actually 3 classes. The Icon above is "fa fa-globe fa-2x". I only want to have to pass in the "globe" portion of the icon class name. This is the original code for the element, minus the styles, which aims to accomplish this:

<template>
    <i class="{{fa_icon}}"></i>
    <div class="line"></div>
    <span class="title">{{title}}</span>
    <div class="line"></div>
    <span class="value">{{value}}</span>    
</template>
<script>
    Polymer({
        is: 'contact-tile',
        properties: {
            title: String,
            value: String,
            icon: String,
            fa_icon: {
                type: String,
                computed: 'generateIconClass(icon)'
            }
        },
        generateIconClass: function (icon) {
            return 'fa fa-' + icon + ' fa-2x';
        },
    });
</script>

However, the icon does not show up when using the above code and the class is not added to the object.

If instead I add the classes my self in the ready callback, via the below code, everything works fine.

<template>
    <i id="i"></i>
    <div class="line"></div>
    <span class="title">{{title}}</span>
    <div class="line"></div>
    <span class="value">{{value}}</span>    
</template>
<script>
    Polymer({
        is: 'contact-tile',
        properties: {
            title: String,
            value: String,
            icon: String,
            fa_icon: {
                type: String,
                computed: 'generateIconClass(icon)'
            }
        },
        generateIconClass: function (icon) {
            return 'fa fa-' + icon + ' fa-2x';
        },
        ready: function () {
            this.$.i.className += ' ' + this.fa_icon;
        }
    });
</script>

Should I be expecting this behavior? If so, why?

Answer 1

Use class$="{{fa_icon}}". When binding to native attributes like class the syntax requires that you use $= (docs).