title: Polymer 1.x: Using Font Awesome with paper-icon-button
body: <p>Is there a way to use an icon <a href="http://fontawesome.io/icons/" rel="nofollow">from the Font Awesome library</a> as the icon inside a <code>paper-icon-button</code>?</p>
  
  <p><a href="http://jsbin.com/rahesepeho/2/edit?html,output" rel="nofollow">Here is my jsBin</a>.</p>
  
  http://jsbin.com/rahesepeho/2/edit?html,output
  
  <pre><code>&lt;!doctype html&gt;
  &lt;head&gt;
    &lt;meta name="description" content="iron-data-table beta3"&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;base href="https://polygit.org/components/"&gt;
    &lt;script src="webcomponentsjs/webcomponents-lite.min.js"&gt;&lt;/script&gt;
    &lt;link href="polymer/polymer.html" rel="import"&gt;
    &lt;link href="paper-icon-button/paper-icon-button.html" rel="import"&gt; 
  &lt;/head&gt;
  &lt;body&gt;
    &lt;dom-module id="x-foo"&gt;
      &lt;style&gt;
        :host {
          font-family: arial, sans-serif;
        }
      &lt;/style&gt;
      &lt;template&gt;
        &lt;p&gt;The below &lt;code&gt;paper-icon-button&lt;/code&gt; uses an image from Github.&lt;/p&gt;
        &lt;paper-icon-button
          src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png"
          alt="octocat" title="octocat"&gt;
        &lt;/paper-icon-button&gt;
        &lt;p&gt;How do I make the below &lt;code&gt;paper-icon-button&lt;/code&gt; use an icon from &lt;a href="http://fontawesome.io/icons/" target="_blank"&gt;Font Awesome&lt;/a&gt;?&lt;/p&gt;
        &lt;paper-icon-button
          src="https://assets-cdn.github.com/images/modules/logos_page/Octocat.png"
          alt="octocat" title="octocat"&gt;
        &lt;/paper-icon-button&gt;
      &lt;/template&gt;
      &lt;script&gt;
        document.addEventListener('WebComponentsReady', function() {
          Polymer({
            is: 'x-foo'
          });
        });
      &lt;/script&gt;
    &lt;/dom-module&gt;
    &lt;x-foo&gt;&lt;/x-foo&gt;
  &lt;/body&gt;
  </code></pre>