Icomoon icons doesn't render correctly on Safari

Question

everyone, I'm having a problem rendering the icomoon icons on Safari, they look bolder and bigger than the way they look on Chrome.

I tried to set the font-size and font-weight but that doesn't seem to work

These are the styles I'm applying, I'm using bootstrap 4 so I'm overriding the default icon of their dropdown

.dropdown-toggle::after {
  font-family: 'icomoon' !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content: '\e97b';
  border-top: 0px solid;
  font-size: 6px;
  margin-left: 8px;
}

And this is the HTML:

<button
  ref={props.buttonRef}
  className="btn btn-secondary dropdown-toggle d-flex align-items-center"
  type="button"
  data-toggle="dropdown"
  onClick={openDropdown}
  aria-haspopup="true"
  aria-expanded={getState().isOpen}
  disabled={props.disabled}
>
  <span className="shrink-text">{props.placeholder}</span>
</button>

Here are some screenshots of how they look: Chrome

Safari

Any idea of what could it be?