title: Make <i> tag clickable with Angular
body: <p>I'm using semantics UI for styling my html5 app. I added a facebook share button as follows:</p>
  
  <pre><code>&lt;i ng-click="postToFacebook(competitor.title, competitor.votes)" class="icon facebook"&gt;&lt;/i&gt;
  </code></pre>
  
  <p>But when I hover over the icon the cursor doesn't change to the hand cursor that usually appears over a clickable link.</p>
  
  <p>I tried wrapping it with anchor tag:</p>
  
  <pre><code>&lt;a&gt;&lt;i ng-click="postToFacebook(competitor.title, competitor.votes)" class="icon facebook"&gt;&lt;/i&gt;&lt;/a&gt;
  </code></pre>
  
  <p>But it just made the icon disappear completely.</p>