title: Bootstrap select dropdown only the Icon
body: <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.search-panel .dropdown-menu').find('a').click(function(e) {
    e.preventDefault();
    var concept = $(this).text();
    $('.search-panel span#search_concept').text(concept);
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="input-group"&gt;
    &lt;div class="input-group-btn search-panel"&gt;
        &lt;button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"&gt;
          &lt;span id="search_concept"&gt;&lt;/span&gt; &lt;span class="caret"&gt;&lt;/span&gt;
        &lt;/button&gt;
        &lt;ul class="dropdown-menu" role="menu"&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-th" aria-hidden="true"&gt;&lt;/i&gt; All Category&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-laptop" aria-hidden="true"&gt;&lt;/i&gt; IT Solutions&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-paint-brush" aria-hidden="true"&gt;&lt;/i&gt; Design &amp;amp; Multimedia&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-globe" aria-hidden="true"&gt;&lt;/i&gt; Social Media &amp;amp; Marketing&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-graduation-cap" aria-hidden="true"&gt;&lt;/i&gt; Education &amp;amp; Training&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-pencil-square-o" aria-hidden="true"&gt;&lt;/i&gt; Writing &amp;amp; Translation&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-gavel" aria-hidden="true"&gt;&lt;/i&gt; Legal Affairs&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-money" aria-hidden="true"&gt;&lt;/i&gt; Finance &amp;amp; Accounting&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-building-o" aria-hidden="true"&gt;&lt;/i&gt; Construction &amp;amp; Architecture&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-credit-card" aria-hidden="true"&gt;&lt;/i&gt; Sales&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-camera-retro" aria-hidden="true"&gt;&lt;/i&gt; Photography &amp;amp; Event&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-home" aria-hidden="true"&gt;&lt;/i&gt; Household&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#"&gt;&lt;i class="fa fa-arrows" aria-hidden="true"&gt;&lt;/i&gt; Rest of All&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/div&gt;
    &lt;input type="hidden" name="search_param" value="all" id="search_param"&gt;         
    &lt;input type="text" class="form-control" name="x" placeholder="Enter search keyword here" [(ngModel)] = 'title'&gt;
    &lt;span class="input-group-btn"&gt;
        &lt;button class="btn btn-default" type="button"&gt;&lt;span class="glyphicon glyphicon-search" (click) = "searchParams(optradio,location,payType,title)" &gt;&lt;/span&gt;&lt;/button&gt;
    &lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>the following code results to the following result. As I click in the drop down the selected item appears in the place of All category but I want only the Icon to the selected dropdown to apper in the place of All category how can that be done ?</p>
  
  <p><a href="https://i.stack.imgur.com/Wdkey.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Wdkey.jpg" alt="enter image description here"></a></p>