snapdrop/app/elements/buddy-finder/personal-avatar.html

<link rel="import" href="../../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../../styles/icons.html">
<dom-module id="personal-avatar">
    <template>
        <style>
        :host {
            @apply(--layout-vertical);
            @apply(--layout-center);
            width: 360px;
        }
        
        iron-icon {
            width: 80px;
            height: 80px;
            color: #4285f4;
            margin-bottom: 6px;
        }
        
        .paper-font-body1 {
            font-size: 13px;
        }
        
        .discover {
            color: #4285f4;
        }

         @media all and (max-height: 370px) {
            iron-icon{
                width: 32px;
                height: 32px;
            }   
        }
        </style>
        <iron-icon icon="chat:wifi-tethering"></iron-icon>
        <div class="paper-font-body1">
            The easiest way to transfer files across devices.
        </div>
        <div class="paper-font-body1 discover">
            Allow me to be discovered by: Everyone in this network.
        </div>
    </template>
    <script>
    'use strict';
    Polymer({
        is: 'personal-avatar'
    });
    </script>
</dom-module>