
@mixin icon($family,$map,$content) {

  &::before {
    font: normal normal 1em/1em #{$family};
    speak: none;

    display: inline-block;
    text-decoration: inherit;
    margin-right: .5em;
    text-align: center;

    font-variant: normal;
    text-transform: none;
    margin-left: .2em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: map-get($map, $content)
  }
}

@mixin icon-inline (
  $family,
  $map,
  $content,
  $size: 'inherit',
  $width: "1.5em"
) {
  &::before {
    font-weight: normal;
    font-style: normal;
    font-size: #{$size};
    font-family: #{$family};
    font-variant: normal;
    text-transform: none;
    speak: none;

    display: inline-block;
    text-decoration: inherit;

    width: #{$width};
    content: map-get($map, $content);
  }
}

@mixin make-icons($class, $family, $prefix, $path, $map) {

  /* 1: include font file */
  @font-face {
    font-family: $family;
    src: url('#{$path}#{$family}.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }

  /* 2: generate base class, e.g. .icon */
  .#{$class}::before, [class^="#{$prefix}"]::before, [class*=" #{$prefix}"]::before {

    font: normal normal 1em/1em #{$family};
    speak: none;

    display: inline-block;
    text-decoration: inherit;
    margin-right: .5em;
    text-align: center;

    font-variant: normal;
    text-transform: none;
    margin-left: .2em;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* 3: generate pseudo elements */
  @each $name, $content in $map {
    .#{$prefix}-#{$name}::before {
      content: $content
    }
  }



}
