Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="button">
  <!-- I don't use img tags but svg like below doesn't work here??? -->
  <img class="svg-img" src="http://www.fosterinteractive.com/themes/fi/svg/sprite/file-css.svg" />
  
  <!-- This is the correct way...  
  <svg><use xlink:href="http://www.fosterinteractive.com/themes/fi/svg/sprite/file-css.svg"></use>
  </svg> -->
</div>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

// Fixed size, centered SVG in fixed size container
// Include from container

@mixin svg-centered($svg-width, $svg-height, $wrapper-width, $wrapper-height, $svg-class: svg) {

  @if ($wrapper-width < $svg-width or $wrapper-height < $svg-height) {
    @error ('Wrapper can not be larger the the svg');
  }

  position: relative;
  width: $wrapper-width;
  height: $wrapper-height;

  .#{$svg-class} {
    position: absolute;
    top: ($wrapper-height - $svg-height) / 2;
    left: ($wrapper-width - $svg-width) / 2;
    width: $svg-width;
    height: $svg-height;
  }
}


.button {
  @include svg-centered(
    $svg-width: 3em, 
    $svg-height: 3em, 
    $wrapper-width: 4em, 
    $wrapper-height: 5em,
    $svg-class: svg-img
    );
  background-color:red;
}

svg {
  fill: currentColor;
}

// Needed for img, but not svg elements
.svg-img {
  display:block;
}

SassMeister-output.css

.button {
  position: relative;
  width: 4em;
  height: 5em;
  background-color: red;
}

.button .svg-img {
  position: absolute;
  top: 1em;
  left: 0.5em;
  width: 3em;
  height: 3em;
}

svg {
  fill: currentColor;
}

.svg-img {
  display: block;
}

SassMeister-rendered.html

<div class="button">
  <!-- I don't use img tags but svg like below doesn't work here??? -->
  <img class="svg-img" src="http://www.fosterinteractive.com/themes/fi/svg/sprite/file-css.svg" />
  
  <!-- This is the correct way...  
  <svg><use xlink:href="http://www.fosterinteractive.com/themes/fi/svg/sprite/file-css.svg"></use>
  </svg> -->
</div>