how to make font-size effect the value of rem for an icon

So I know that if we declare that

font-size: 62.5% then rem = 10px

The following code pen code has an envelope icon and every sizing aspect of the envelope is written using rem.

The codepen link

HTML:

<i class="big gg-mail"><i/>

CSS:

body {
  font-family: sans-serif;
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
}

.big {
  font-size:125%;
}

.middle-text {
  position:absolute;
  top: 50%;
  left: 50%;
  translate: transform(50%, 50%);
}

.gg-mail,
.gg-mail::after {
  display: block;
  box-sizing: border-box;
  height: 1.4rem;
  border: 0.2rem solid
}
.gg-mail {
  overflow: hidden;
  transform: scale(var(--ggs,1));
  position: relative;
  width: 1.8rem;
  border-radius: 0.2rem
}
.gg-mail::after {
  content: "";
  position: absolute;
  border-radius: 0.3rem;
  width: 1.4rem;
  transform: rotate(-45deg);
  bottom: 0.3rem;
  left: 0
}

When I change the font-size nothing happens.

It would be great if someone could explain why it doesn't work and how it's supposed to work :)