title: jquery-ui button looks disabled
body: <p>I am guessing I am doing something stupid here and you can point me right direction. I am trying to use jquery-ui &quot;pencil&quot; icon for edit and the icon looks like it is not active. See the html and js below.</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;HTML&gt;
      &lt;HEAD&gt;
          &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=Edge&quot; &gt;
          &lt;TITLE&gt;Sample&lt;/TITLE&gt;
          &lt;link href=&quot;https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css&quot; rel=&quot;stylesheet&quot;&gt;
          &lt;script src=&quot;https://code.jquery.com/jquery-1.12.4.min.js&quot;&gt;&lt;/script&gt;
          &lt;script src=&quot;https://code.jquery.com/ui/1.12.1/jquery-ui.min.js&quot;&gt;&lt;/script&gt;
          &lt;script src=&quot;sample.js&quot;&gt;&lt;/script&gt;
      &lt;/HEAD&gt;
          
      &lt;script&gt;
          $(document).ready(function() {      
              $( window ).on( &quot;load&quot;, function() {
                  sample.launch();
              });        
          });
      &lt;/script&gt;
      &lt;body&gt;
          &lt;input type=&quot;button&quot; id=&quot;applybtn&quot; style=&quot;width:65px&quot; value=&quot;Click Me&quot; /&gt;
      &lt;/body&gt;
  &lt;/HTML&gt;
  </code></pre>
  <p>and here is the js file :</p>
  <pre><code>var sample = sample || {};
  (function ($) {
      &quot;use strict&quot;;   
      function onApplyBtnClick() {
          var html = '&lt;input type=&quot;text&quot; id=&quot;schpn12&quot; value=' + &quot;ABCD&quot; + '&gt;';
          html += '&lt;button class=&quot;editbtn&quot; &gt;Edit&lt;/button&gt;';
          $('&lt;div&gt;&lt;/div&gt;')
              .html('&lt;span&gt;&lt;/span&gt;' + html)
              .css(&quot;background-color&quot;,&quot;#FFFFFF&quot;)
              .dialog({
                  modal: true,
                  close: function () { $(this).remove(); },
                  buttons: {
                      &quot;Apply&quot;: function () {                        
                          $(this).dialog('close');
                      }
                  }
              });
              
              $('.editbtn').button({
                  icons: {
                      primary: &quot;ui-icon-pencil&quot;
                  },
                  text: false
              });
      }
      function launch() {     
          $(&quot;#applybtn&quot;).click(onApplyBtnClick);
      }
      sample.launch = launch;
  }(jQuery));
  </code></pre>
  <p><a href="https://i.stack.imgur.com/MuzZj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MuzZj.png" alt="pencil icon looks like not active" /></a></p>