icomoon svg fonts icons distorted when refreshing browser

Question

I'm having an intermittent problem with browser not rendering the correct fonts to display icons.

I'm using icomoon.io to create a custom set of icons as a font, and I'm using the following Scss file -

@import "icons-list";
$fonticon-prefix: 'air';
$font-family-fontello:  "fontello";
@mixin create-font-icon($position, $styles) {
    @if $position == both {
        $position: 'before, &:after';
    }
    // Either a :before or :after pseudo-element, or both, defaulting to :before
    &:#{$position} {

        @if $styles {
            // Supportive icon styles required
      display: inline-block;
            speak: none;
            font-style: normal;
            font-weight: normal;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
            font-family: '#{$font-family-fontello}';
        }
        // Include any extra rules supplied for the pseudo-element
        @content;
    }
}


[class^="#{$fonticon-prefix}-"],
[class*=" #{$fonticon-prefix}-"] {
    @include create-font-icon(before, true);
}

// Setup a class name for each icon
@each $fontIconInfo in $font-icons-list {
  $icon-name:nth($fontIconInfo, 1);
    $iconHexaCode:nth($fontIconInfo, 2);
    $icon-font-size:nth($fontIconInfo, 3);
    $icon-color:nth($fontIconInfo, 4);

    .#{$fonticon-prefix}-#{$icon-name}:before {
        content: $iconHexaCode;
    @if ($icon-font-size != '') {
      font-size: #{$icon-font-size};
    }
    @if ($icon-color != '') {
      color: #{$icon-color};
    }

    }
}

.air-more,.air-more:after,.air-more:before {
    width: 0.25em;
    height: 0.25em;
    position: relative;
    border: 1px solid;
    border-radius: 50%;
}

enter image description here

It Rendering in Browser like the below picture

This bug only happens rarely when rendering in the browser and is pretty hard to reproduce. please help me to find the problem.