Fixing Icon Size on Browser Zoom (with Chrome) - css

Question

i just found an issue on my web project and i couldnt find a way around it.
i saw something about sprites and a blog that mentions this issue.
everything looks fine on 100% but when i zoom in with my browser the icons get bigger and bigger and break the layout.
this is what my css look like
.Sidebar {
position: fixed;
background-color: #262626;
width: 5%;
height: 100%;
z-index: 1;
}
.Sidebar-Icon {
align-items: center;
font-size: 30px;
}
.Sidebar-Icon .SDIcon {
text-decoration-line: none;
}
.Sidebar-Icon li {
list-style-type: none;
}
ul.Sidebar-Icon {
cursor: pointer;
display: flex;
padding: 0;
flex-direction: column;
align-items: center;
flex: 1;
margin: 0;
height: 100%;
position: relative;
}
.Sidebar-Icon li:first-child{
padding: 20px 0 0 0;
}
.Sidebar-Icon li:first-child,
.Sidebar-Icon li:last-child{
margin-bottom:auto;
}
.sb-i{
color: #999AAA !important; // shadow AAABBB
}
Html (Angular) Code
<div class="Sidebar" [#collapse]="collapse">
<div class="Sidebar-Inner">
<div class="profileimg"></div>
</div>
<ul class="Sidebar-Icon ">
<li><a class="sb-i" (click)="toggleCollapse()">
<i class="fas fa-ellipsis-v" ></i></a></li>
<li><a class="sb-i"href="javascript:void(0)"><i class="fas fa-home"></i></a>
</li>
<li><a class="sb-i"href="javascript:void(0)"><i class="fas fa-child"></i>
</a></li>
<li><a class="sb-i"href="javascript:void(0)"><i class="fab fa-accessible-
icon"></i></a></li>
<li><a class="sb-i"href="javascript:void(0)"><i class="fas fa-cog"></i></a>
</li>
</ul>
</div>
example of the issue (Zoomlevel on 500%):

Answer 1

HTML:
<div class="Sidebar" [#collapse]="collapse">
<div class="Sidebar-Inner">
<div class="profileimg"></div>
</div>
<ul class="Sidebar-Icon ">
<li><a class="sb-i" (click)="toggleCollapse()">
<i class="fas fa-ellipsis-v" ></i></a></li>
<li><a class="sb-i" href="javascript:void(0)"><i class="fas fa-home"></i></a>
</li>
<li><a class="sb-i" href="javascript:void(0)"><i class="fas fa-child"></i>
</a></li>
<li><a class="sb-i" href="javascript:void(0)"><i class="fab fa-accessible-
icon"></i></a></li>
<li><a class="sb-i" href="javascript:void(0)"><i class="fas fa-cog"></i></a>
</li>
</ul>
</div>
CSS:
.Sidebar {
position: fixed;
background-color: #262626;
width: 5%;
height: 100%;
z-index: 1;
}
.Sidebar-Icon {
align-items: center;
font-size: 30px;
}
.Sidebar-Icon .SDIcon {
text-decoration-line: none;
}
.Sidebar-Icon li {
list-style-type: none;
}
ul.Sidebar-Icon {
cursor: pointer;
display: flex;
padding: 0;
flex-direction: column;
align-items: center;
flex: 1;
margin: 0;
height: 100%;
position: relative;
}
.Sidebar-Icon li:first-child{
padding: 20px 0 0 0;
}
.Sidebar-Icon li:first-child,
.Sidebar-Icon li:last-child{
margin-bottom:auto;
}
.sb-i{
color: #999AAA !important; // shadow AAABBB
}
.sb-i i{
width: 100%;
height: auto;
}
.sb-i svg {
width: 100% !important;
height: auto !important;
}