title: Button Icon float right not working
body: <p>I have button which has icon in it. I am trying to display text on the left and icon on the right using CSS float: right; but icon and text is still shown centered. </p>
  
  <p>Here is HTML: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;base href="https://demos.telerik.com/kendo-ui/button/index"&gt;
      &lt;style&gt;html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }&lt;/style&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.common-bootstrap.min.css" /&gt;
      &lt;link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.bootstrap.min.css" /&gt;
      &lt;link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.2.516/styles/kendo.bootstrap.mobile.min.css" /&gt;
  
      &lt;script src="https://kendo.cdn.telerik.com/2018.2.516/js/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://kendo.cdn.telerik.com/2018.2.516/js/kendo.all.min.js"&gt;&lt;/script&gt;
      
  
  &lt;/head&gt;
  &lt;body&gt;
  
          &lt;div id="example"&gt;
              &lt;div class="demo-section k-content"&gt;
                  &lt;div&gt;
                      &lt;h4&gt;Basic Button&lt;/h4&gt;
                      &lt;p&gt;
      
         
         &lt;button id="primaryTextButton" class="k-button" title="Example of tool tip!" &gt;Primary Button
         &lt;span class="k-icon k-i-info"&gt;
         &lt;/button&gt;
         &lt;/span&gt;
  
                          
                      &lt;/p&gt;
                  &lt;/div&gt;             
              &lt;script&gt;
                  $(document).ready(function () {
                     
                  });
              &lt;/script&gt;
  
              &lt;style&gt;
                  .demo-section p {
                      margin: 0 0 30px;
                      line-height: 50px;
                  }
                  .demo-section p .k-button {
                      margin: 0 10px 0 0;
                  }
                  .k-primary {
                      min-width: 150px;
                  }
      .k-button {
      min-width: 400px;      
      }
      
      .k-icon{
       padding: 10px;
       font-size: 32px;     
      }
              &lt;/style&gt;
          &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>What I am missing here? What do you I need to change to the the icon show on the right? </p>