如何修复高度，所以物品不会改变容器div的高度？

Question

目前它看起来像这样：

我希望房子图标不调整包含框的大小，我目前使用容器来保持高度和宽度相等。

这是scss：

$darkred: rgb(71, 0, 0);

.sidenav {
    background-color: #000860;
    left: 0;
    width: 15%;
}

.item {
    display: block;
    overflow: hidden;
}

.content-container {
    background-color: #0789f4;
    right: 0;
    top: 0;
    height: 900px;
}

.container {
    background-color: $darkred;
    &:hover {
        background-color: adjust-hue($darkred, 90deg);
    }
    width: 100%;
    padding-top: 100%; 
    position: relative; 
    border: 1px red solid;
}

html：

 <mat-sidenav-container>
  <mat-sidenav #sidenav mode="side" [(opened)]="opened" class="sidenav" 
  [fixedInViewport]="true" [fixedTopGap]="0"
  [fixedBottomGap]="0">>
  <div class="container">
    <div class="item">
      <mat-icon>home</mat-icon>
    </div>
  </div>
  <div class="container">
    <div class="item">

    </div>
  </div>
  <div class="container">
    <div class="item">

    </div>
  </div>
  </mat-sidenav>

  <mat-sidenav-content class="content-container">
    <p><mat-checkbox [(ngModel)]="opened">sidenav.opened</mat-checkbox></p>
    <p><button mat-button (click)="sidenav.toggle()">sidenav.toggle()</button></p>
  </mat-sidenav-content>
</mat-sidenav-container>

我希望房子成为div的中心并增加尺寸，但是，我可以（希望）自己想出来，我看了谷歌和其他答案，但他们似乎没有为我工作。