динамически изменять форму и размер div в зависимости от его содержимого

Question

У меня есть div элемент, который должен быть точно такой же формы и размера, как его iconсодержание. Я разрабатываю компонент в Angular 9, который представляет собой кнопку, которая перемещает вас на предыдущую страницу. Я хочу, чтобы этот компонент можно было использовать повторно, поэтому элемент значка внутри него должен быть изменяемым. Я легко достигаю этого с помощью проекции содержимого Angular, но проблема в том, что внешний контейнер div на самом деле больше, чем его содержимое, в результате чего область значков переполняется реальной "интерактивной" областью.

Это HTML-страница

<div class="back-button-container clickable" (click)="navigateBack()">
    <ng-content select="[icon]"></ng-content>
</div>

Без контентной проекции html-страница выглядела бы так (я думаю, моя проблема выходит за рамки проекции контента Angular)

<div class="back-button-container clickable" (click)="navigateBack()">
    <i icon class="far fa-2x fa-arrow-alt-circle-left" ></i>
</div>

display: inline-block, как предлагается здесь, не работает.

Answer 1

Что касается css - протестируйте, как исправить

div{
height: auto;           /* it is by default - if wasn't changed not needed */ 
width: auto;            /* it is by default - if wasn't changed not needed */
padding: 0;             /* a space around the interior of the element*/
display: inline-block;  /* by default is block - takes up the full width */
}
i{
display: block;     /* takes up the full width of parent */
margin: 0;          /* you know what it is */
border: 0;          /* if you need border - set it, but don't let the user agent do it */
width: 120px;       /* not 120 but explicit how many px */
height: 120px       /* not 120 but explicit how many px */
}

Наконец, используйте Validator w3c

---

update
Я предполагаю, что значок означает изображение, лучше всего установить фиксированный размер, потому что браузеру не нужно угадывать и не прыгает при загрузке.
Если его размер изменится

i{
height: 100%;   /* or 10vh as 10% of devices screen */
width: auto;    /* if the image isn't square it won't be deformed */
}

Если по каким-то причинам размер непредсказуем - пусть прыгнет:)

Еще одна вещь - если есть плавание или сгибание, ну, это может быть не так просто.