f-browser-icon.html

<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="./f-browser-iconset.html">

<dom-module id="f-browser-icon">
  <template>
    <iron-icon icon="[[_icon]]"></iron-icon>
  </template>
  <script>
    window.FirmFirm = window.FirmFirm || {};
    FirmFirm.BrowserIcon = class BrowserIcon extends Polymer.Element {
      static get is() { return 'f-browser-icon'; }
      static get properties() {
        return {
          icon: {
            type: String,
            reflectToAttribute: true,
          },
          _icon: {
            type: String,
            computed: '_computeIcon(icon)',
          },
        };
      }
      _computeIcon(browser) {
        if (!browser) return;
        let icon = browser.toLowerCase();
        if (icon.indexOf('android') >= 0) icon = 'android';
        else if (icon.indexOf('chrom') >= 0) icon = 'chrome';
        else if (icon.indexOf('opera') >= 0) icon = 'opera';
        else if (icon.indexOf('safari') >= 0) icon = 'safari';
        else if (icon.indexOf('ie') == 0) icon = 'ie';
        else icon = 'default';
        return `browsers:${icon}`;
      }
    }
    customElements.define(FirmFirm.BrowserIcon.is, FirmFirm.BrowserIcon);
  </script>
</dom-module>