title: Bootstrap 4 - showing a list of items with texts and icons correctly
body: <p>Using Bootstrap 4 I can create a list of list-items. Each list-item contains a text and a button with an icon. The icon is taken from <a href="http://fontello.com/" rel="nofollow noreferrer">Fontello</a>. </p>
  
  <p>On mobile screens (XS media) sometimes the button does not take the icon as button-content. The result is a very small button that does not contain the icon. This looks like on a mobile device: </p>
  
  <p><a href="https://i.stack.imgur.com/CPWHP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CPWHP.png" alt="enter image description here"></a></p>
  
  <p>On Chrome on my Desktop (F12, XS device) the result is as expected. </p>
  
  <p><strong>A diagnosis is</strong>: When I add a number of rows, then vertical size of the list-item gets smaller. Adding 10 items, and the list-item is just a few mm high! So, the size of the list-item gets less high, the button gets less high. Has this to do with '<strong>flexbox</strong>'? </p>
  
  <p><strong>Why is this so?</strong> I know that when you omit to put anything (or any text) in the button, the button will remain very small. <strong>How to repair this?</strong> </p>
  
  <p>The code for the button (inside Angular 6) </p>
  
  <pre><code>&lt;ul class="list-group" id="cachesOnHikeList"&gt;
      &lt;li class="list-group-item d-flex flex-row" *ngFor="let cacheonhike of cachesonhike"&gt;
          &lt;div class="flex-grow-1"&gt;{{ cacheonhike.name| slice:0:22 }}&lt;/div&gt;
          &lt;button type="button" class="btn btn-warning btn-sm" (click)="removeGeocache( cacheonhike.gcid)"&gt;&lt;i class="icon-cancel-circled"&gt;&lt;/i&gt;&lt;/button&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The 'cachesOnHikeList' CSS class is: </p>
  
  <pre><code>#cachesOnHikeList {
    /*max-height: 250px;*/
    max-height:35vh;
    overflow:auto;
    overflow-y:scroll;
  }
  </code></pre>
  
  <p><strong>Plan-B</strong> does not work either. This code (with 2 characters added as button text) produces the same results: </p>
  
  <pre><code>&lt;button type="button" class="btn btn-warning btn-sm px-1" 
  (click)="removeGeocache( cacheonhike.gcid)"&gt;&amp;nbsp;&lt;i class="icon-cancel-circled"&gt;&lt;/i&gt;&amp;nbsp;&lt;/button&gt;
  </code></pre>
  
  <p><strong>Plan-C</strong>: Adding a 'real' character as button text does not help. The 'X' is shown below the small button. The button is similar to the ones on the screenshot. </p>
  
  <pre><code>&lt;button type="button" class="btn btn-warning btn-sm px-1 font-weight-bold" 
  (click)="removeGeocache( cacheonhike.gcid)"&gt;X&lt;/button&gt;
  </code></pre>