file-view.html

<link rel="import" href="bower_components/polymer/polymer.html">

<dom-module id="file-view">
    <template>
        <style>
            :host {
                display: block;
            }

            #container {
                display: flex;
                flex-direction: column;
                align-items: center;
                min-width: 64px;
            }

            img {
                margin-bottom: 8px;
            }

            #box {
                display: none;
                width: 64px;
                height: 20px;
                background-color: #212121;
                text-align: center;
                color: #ffffff;
                border-radius: 2px;
            }

            #box[shown] {
                display: inline-block;
            }
        </style>

        <div id="container">
            <img src="[[icon]]" alt="" />
            <div id="box" shown$="[[_showBox]]">?</div>
            [[name]]
        </div>
    </template>

    <script>
        "use strict";

        Polymer({
            is: "file-view",

            properties: {
                name: {
                    type: String,
                    observer: "_onNameChanged"
                },
                icon: {
                    type: String
                },

                _showBox: {
                    type: Boolean,
                    value: false
                }
            },

            _onNameChanged(name) {
                this._showBox = name === "";
            }
        });
    </script>
</dom-module>