Chrome and font-size limit on relative units

HTML

<p>
  An icon used through the site, sized in em.
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 33.313 61" class="icon">
    <path d="M30.479,60.992 C31.205,60.992 31.927,60.716 32.480,60.163 C33.586,59.062 33.586,57.264 32.480,56.159 L6.836,30.497 L32.480,4.835 C33.582,3.730 33.582,1.933 32.480,0.831 C31.374,-0.274 29.580,-0.274 28.474,0.831 L0.837,28.493 C-0.272,29.599 -0.272,31.392 0.837,32.497 L28.474,60.160 C29.031,60.716 29.753,60.992 30.479,60.992 Z"
    />
  </svg>
</p>
<p>Now we want a button using the icon, but resized :
  <br>
  <a href="#" class="button">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 33.313 61" class="icon">
      <path d="M30.479,60.992 C31.205,60.992 31.927,60.716 32.480,60.163 C33.586,59.062 33.586,57.264 32.480,56.159 L6.836,30.497 L32.480,4.835 C33.582,3.730 33.582,1.933 32.480,0.831 C31.374,-0.274 29.580,-0.274 28.474,0.831 L0.837,28.493 C-0.272,29.599 -0.272,31.392 0.837,32.497 L28.474,60.160 C29.031,60.716 29.753,60.992 30.479,60.992 Z"
      />
    </svg>
    <span>Button</span>
  </a>
   <br> In Chrome, the icon is larger than it's supposed to be , because the browser limits the font-size to 6px.
</p>

<p>It's the same if we change the font-size of the button using relative units.
  <br>
  <a href="#" class="button button--small">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 33.313 61" class="icon">
      <path d="M30.479,60.992 C31.205,60.992 31.927,60.716 32.480,60.163 C33.586,59.062 33.586,57.264 32.480,56.159 L6.836,30.497 L32.480,4.835 C33.582,3.730 33.582,1.933 32.480,0.831 C31.374,-0.274 29.580,-0.274 28.474,0.831 L0.837,28.493 C-0.272,29.599 -0.272,31.392 0.837,32.497 L28.474,60.160 C29.031,60.716 29.753,60.992 30.479,60.992 Z"
      />
    </svg>
    <span>Button</span>
  </a>

  <br>
  <a href="#" class="button button--small em">
    <svg...

SCSS

body {font-family:sans-serif; font-size: 16px;}
.icon {width: 2em; height: 3em; fill:currentColor;}

.button {display:inline-block; text-decoration: none; margin:0.5em;
  & > * {vertical-align: middle;}
  & .icon {margin-right:0.25em; font-size:25%;}
}

.button--small {font-size:80%;}
.button--small.em {font-size:0.75em;}

.button.px {font-size:16px;}
.button--small.px {font-size:12px;}