HTML では

<div class="sp-menu">
 <span class="material-symbols-outlined" id="open">menu</span>
</div>

となっています。

今回はメニューの大きさを変更するために

.sp-menu #open{
    font-size: ~px;
}

を使っています。

試しに

.sp-menu {
    font-size: ~px;
}

で数字を打って大きくしていくと、ただメニューの余白が縦長に大きくなるだけでメニューアイコンが大きくなりません。なぜですか？