Generated by SassMeister.com.

SassMeister-input-HTML.html

<p>Example 1 - Icon Only</p>
<p>
  <a class="icon-wrapper" href="#"><img class="svg-inline" src="http://placeskull.com/170/170"><span class="visually-hidden">Do Something</span></a>
</p>

<p>Example 2 - Inline SVG / IMG</p>
<p><a class="btn--inline-icon" href="#"><img class="svg-inline" src="http://placeskull.com/170/170">Example Wrapper with really long text that wraps and stays vertically centered </a>
</p

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

// 
.visually-hidden {
  display: none;
}

p {
  clear: both;
}

// 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;
  
  @at-root {
    .#{$svg-class} {
      position: absolute;
      top: ($wrapper-height - $svg-height) / 2;
      left: ($wrapper-width - $svg-width) / 2;
      width: $svg-width;
      height: $svg-height;
    }
  }
}

.icon-wrapper {
  @include svg-centered(3rem, 2rem, 3.5rem, 3.5rem, 'svg-icon');
}

// Example #2  - Vertically Centered 

// Dummy Function to simulate simple vertical rhythm
@function ru($unit) {
  @return $unit * 1rem;
}

// Default values
$base-line-height: 16px;
$baseline : rem($base-line-height) !default;


@mixin svg-inline(
  $baseline,
  $svg-width,
  $svg-height,
  $svg-class,
  $svg-pad-right,
  $svg-pad-left,
  $container-vertical-padding) {

  position: relative;
  padding-left: $svg-pad-left + $svg-width + $svg-pad-right;

  @if ($container-vertical-padding != 0) {
    padding-top: $container-vertical-padding;
    padding-bottom: $container-vertical-padding;
  }
  @at-root {
    .#{$svg-class} {
      display: block;
      position: absolute;
      top: 50%;
      left: 0 + $svg-pad-left;
      margin-top: (-$svg-height / 2);
      width: $svg-width;
      height: $svg-height;
    }
  }
}

.btn--inline-icon {
 @include svg-inline($baseline, ru(1), ru(1), 'svg-inline', ru(1), ru(1), ru(0.5));
 display: inline-block;
 color: grey;
 max-width: 10rem;
 background-color: lightgrey;
}

SassMeister-output.css

.visually-hidden {
  display: none;
}

p {
  clear: both;
}

.icon-wrapper {
  position: relative;
  width: 3.5rem;
  height: 3.5rem;
}
.svg-icon {
  position: absolute;
  top: 0.75rem;
  left: 0.25rem;
  width: 3rem;
  height: 2rem;
}

.btn--inline-icon {
  position: relative;
  padding-left: 3rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  display: inline-block;
  color: grey;
  max-width: 10rem;
  background-color: lightgrey;
}
.svg-inline {
  display: block;
  position: absolute;
  top: 50%;
  left: 1rem;
  margin-top: -0.5rem;
  width: 1rem;
  height: 1rem;
}

SassMeister-rendered.html

<p>Example 1 - Icon Only</p>
<p>
  <a class="icon-wrapper" href="#"><img class="svg-inline" src="http://placeskull.com/170/170"><span class="visually-hidden">Do Something</span></a>
</p>

<p>Example 2 - Inline SVG / IMG</p>
<p><a class="btn--inline-icon" href="#"><img class="svg-inline" src="http://placeskull.com/170/170">Example Wrapper with really long text that wraps and stays vertically centered </a>
</p