Centering an icon vertically with text

https://makandracards.com/makandra/532661-how-to-reliably-center-block-icons-vertically-with-text

HTML

<span class="icon"></span> Beispieltext

SASS

body
  // Try changing these
  font-size: 100px
  --icon-height: 100px
  
  font-family: Arial
  // In fontforge: Typo Ascent / em square => 1491 / 2048
  --font-capital-height: 0.728
  
.icon
  // This is the alignment part:
  height: var(--icon-height)
  --icon-v-middle: calc(var(--icon-height)/2)
  --capital-v-middle: calc(var(--font-capital-height)/2 * 1em)
  vertical-align: calc(var(--capital-v-middle) - var(--icon-v-middle))
  
  // Simulate a "blockish" icon
  display: inline-block
  position: relative
  width: var(--icon-height)
  &::before
    content: ''
    position: absolute
    inset: 0
    background-color: currentColor