title: Right-aligned icon within button at any width
body: <p>This should be simple, but I'm having problems getting a robust solution. Basically I'm trying to achieve this:</p>
  
  <p><img src="https://i.stack.imgur.com/ZEd5c.png" alt="button examples"></p>
  
  <p>So, an element (<code>a</code> or <code>button</code>) with an icon right-aligned, using an icon font. I need to ensure that:</p>
  
  <ol>
  <li>The button can be any width</li>
  <li>Without an icon present, there is no excess padding on the button</li>
  <li>The text and icon always remain on the same line (don't wrap)</li>
  </ol>
  
  <p>Here's the HTML:</p>
  
  <pre><code>&lt;button class="btn"&gt;Download &lt;span data-icon="+"&gt;&lt;/span&gt;&lt;/button&gt;
  </code></pre>
  
  <p>And the (S)CSS:</p>
  
  <pre><code>.btn {
      margin: 0;
      padding: 3px 6px;
      vertical-align: middle;
      border: none;
      background-color: #535B99;
      color: white;
      text-align: left;
      text-decoration: none;
      white-space: nowrap;
      cursor: pointer;
      text-transform: uppercase;
      [data-icon] {
          float: right;
          padding-left: 10px;
          &amp;:before { content: attr(data-icon); }
      }
  }
  </code></pre>
  
  <p>You can see this in <a href="http://jsfiddle.net/cherryflavourpez/GyA8F/" rel="noreferrer">a jsFiddle</a>. The problem is, unless I add a width to the <code>.btn</code> class, the icon always drops a line. Absolute positioning would work, but then I'd fail to meet (2) above as it would require some padding. What am I missing?</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I missed one other criteria:</p>
  
  <p>4.) At 100% width, the icon is aligned to the right (not next to the text)</p>
  
  <p>So in some cases, it'll look like:</p>
  
  <p><img src="https://i.stack.imgur.com/afE1s.png" alt="100% width version"></p>
  
  <p>Which is why the <code>float</code> is necessary in my CSS.</p>
  
  <p><strong>SOLUTION</strong></p>
  
  <p>Based almost entirely on @Riskbreaker's solution, <a href="http://jsfiddle.net/cherryflavourpez/R3V3E/" rel="noreferrer">here's</a> what I settled on:</p>
  
  <pre><code>&lt;button data-button-icon="+" class="btn" href="#"&gt;Click Me :P&lt;/button&gt;
  
  .btn {
      display: inline-block;
      margin: 0 0 10px 0;
      padding: 3px 6px;
      border: medium none;
      background-color: #535B99;
      color: #FFFFFF;
      cursor: pointer;
      text-align: left;    
      text-decoration: none;
      white-space: nowrap;
      &amp;:after {
        content: attr(data-button-icon);
        float: right;
        padding-left: 1em;
      }
  }
  </code></pre>
  
  <p>Basically, abandoning the separate <code>span</code> and using just the <code>button</code> element, which has the benefit of less extraneous markup.</p>