title: IPython notebook custom button icons
body: <p>I'm looking to add a new button to ipython notebook with a custom icon.</p>
  
  <p>Starting from this <a href="https://stackoverflow.com/questions/20290369/ipython-notebook-toolbar-customize">question</a>, I know I can change around the icons of a custom button using <code>custom.js</code>. However it seems i'm limited to the available icons in <a href="http://fontawesome.io/3.2.1/icons/" rel="nofollow noreferrer">fontawesome</a>. Is it possible to get custom button icons?</p>
  
  <p>My understanding is that <code>fontawesome</code> uses <code>svg</code> format, and I found this <a href="https://stackoverflow.com/questions/11426172/add-custom-icons-to-font-awesome">question/answer</a>,
  describing the process for fontawesome, however the <code>HTML</code> that IPython uses is a bit different.</p>
  
  <p>The question remains how can I point my <code>icon.svg</code> file to be read by <code>IPython notebook</code>, below is a minimal example in <code>custom.js</code> to add a button, along with the relevant <code>HTML</code> produced.</p>
  
  <p><strong>Minimal button example in custom.js:</strong></p>
  
  <pre><code>IPython.toolbar.add_buttons_group([
  {
       'label': 'Create TOC',
       'icon' : 'icon-list', 
    'callback': function(){
      }
  }]);
  </code></pre>
  
  <p>The line <code>'icon' : 'icon-list',</code> correlates to one of the many icons fontawesome has <a href="http://fortawesome.github.io/Font-Awesome/icons/" rel="nofollow noreferrer">here</a></p>
  
  <p><strong>IPython HTML for the above button:</strong></p>
  
  <pre><code>&lt;div class="btn-group"&gt;
      &lt;button class="btn" title="Create TOC"&gt;
          &lt;i class="icon-list"&gt;&lt;/i&gt;
      &lt;/button&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Is there a way to customize an icon in <code>IPython notebook</code> without having to add it to <code>fontawesome</code>?</p>