title: dynamically change div shape and size based on its content
body: <p>I have a <code>div</code> element which should be exactly the same shape and size of its <code>icon</code> content.
  I'm designing a <strong>component</strong> in Angular 9 which is a button that navigates you to the previous page. I want this component to be reusable, so the icon element inside it must be changeable. I easily achieve this through Angular's <em>content projection</em>, but the problem is that the div outer container is actually bigger than its content, resulting in the icon area being overflown by the real &quot;clickable&quot; area.</p>
  <p>This is the html page</p>
  <pre><code>&lt;div class=&quot;back-button-container clickable&quot; (click)=&quot;navigateBack()&quot;&gt;
      &lt;ng-content select=&quot;[icon]&quot;&gt;&lt;/ng-content&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Without content-projection, the html page would look like this (I think my problem is beyond Angular content projection)</p>
  <pre><code>&lt;div class=&quot;back-button-container clickable&quot; (click)=&quot;navigateBack()&quot;&gt;
      &lt;i icon class=&quot;far fa-2x fa-arrow-alt-circle-left&quot; &gt;&lt;/i&gt;
  &lt;/div&gt;
  </code></pre>
  <p><code>display: inline-block</code>, as suggested <a href="https://stackoverflow.com/questions/450903/how-can-i-make-a-div-not-larger-than-its-contents">here</a>, doesn't work.</p>