My setup includes a simple display with an .svg image that is slightly clipped at the bottom. The arrow image I am using comes from fontawesome. Can anyone explain why this clipping is happening?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.alpha {
width: 50px;
height: 50px;
left: 0%;
background: url('./arrow-right-solid.svg') 0 0 / 100% no-repeat;
}
</style>
</head>
<body>
<div class="alpha"></div>
</body>
</html>