Generate SVG icon font with color change possibility (without changing the fill), with a IE fallback.

SassMeister-input.scss

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

$version: "0.1.1";
/* This CSS is generated by My SASSVG-iconic Mixin #{$version}. */

$icon-list: 'twitter', 'facebook', 'instagram';

$icon-list:(
'facebook': false, 
'instagram': true,
'twitter': true
);

$icon-colors: 'red','blue','green','lightgrey','grey';

/// ICONS 
@mixin sk-icon-color($type, $haveColor, $color) {
  @if $haveColor == false{
    background-size: contain;
    background-image: url('../img/sk-icons/icon_#{$type}_#{$color}.svg');
  }
  @else {
    background:{
      size: contain;
      color: #{$color};
    }
    mask: {
      image:  url('../img/sk-icons/icon_#{$type}.svg');
      size: contain;
    }
    body.ie &{
      background: {
        size: contain;
        image: url('../img/sk-icons/icon_#{$type}_#{$color}.svg');
      }
    }    
  }
}

@mixin sk-icon($type) {
  background: {
    size: contain;
    image: url('../img/sk-icons/icon_#{$type}.svg');
  }
}

.icon{
  display: inline-block;

  @each $icon, $colored in $icon-list {
    @if $colored == false{
      &.icon-#{$icon}{
        @include sk-icon('#{$icon}')
      }
    }
    @else {
      @each $color in $icon-colors{
        &.icon-#{$icon}-#{$color}{
          @include sk-icon-color('#{$icon}', '#{$colored}', '#{$color}')
        }
      }
    }
  }
}

SassMeister-output.css

/* This CSS is generated by My SASSVG-iconic Mixin 0.1.1. */
.icon {
  display: inline-block;
}

.icon.icon-facebook {
  background-size: contain;
  background-image: url("../img/sk-icons/icon_facebook.svg");
}

.icon.icon-instagram-red {
  background-size: contain;
  background-color: red;
  mask-image: url("../img/sk-icons/icon_instagram.svg");
  mask-size: contain;
}

body.ie .icon.icon-instagram-red {
  background-size: contain;
  background-image: url("../img/sk-icons/icon_instagram_red.svg");
}

.icon.icon-instagram-blue {
  background-size: contain;
  background-color: blue;
  mask-image: url("../img/sk-icons/icon_instagram.svg");
  mask-size: contain;
}

body.ie .icon.icon-instagram-blue {
  background-size: contain;
  background-image: url("../img/sk-icons/icon_instagram_blue.svg");
}

.icon.icon-instagram-green {
  background-size: contain;
  background-color: green;
  mask-image: url("../img/sk-icons/icon_instagram.svg");
  mask-size: contain;
}

body.ie .icon.icon-instagram-green {
  background-size: contain;
  background-image: url("../img/sk-icons/icon_instagram_green.svg");
}

.icon.icon-instagram-lightgrey {
  background-size: contain;
  background-color: lightgrey;
  mask-image: url("../img/sk-icons/icon_instagram.svg");
  mask-size: contain;
}

body.ie .icon.icon-instagram-lightgrey {
  background-size: contain;
  background-image: url("../img/sk-icons/icon_instagram_lightgrey.svg");
}

.icon.icon-instagram-grey {
  background-size: contain;
  background-color: grey;
  mask-image: url("../img/sk-icons/icon_instagram.svg");
  mask-size: contain;
}

body.ie .icon.icon-instagram-grey {
  background-size: contain;
  background-image: url("../img/sk-icons/icon_instagram_grey.svg");
}

.icon.icon-twitter-red {
  background-size: contain;
  background-color: red;
  mask-image: url("../img/sk-icons/icon_twitter.svg");
  mask-size: contain;
}

body.ie .icon.icon-twitter-red {
  background-size: contain;
  background-image: url("../img/sk-icons/icon_twitter_red.svg");
}

.icon.icon-twitter-blue {
  background-size: contain;
  background-color: blue;
  mask-image: url("../img/sk-icons/icon_twitter.svg");
  mask-size: contain;
}

body.ie .icon.icon-twitter-blue {
  background-size: contain;
  background-image: url("../img/sk-icons/icon_twitter_blue.svg");
}

.icon.icon-twitter-green {
  background-size: contain;
  background-color: green;
  mask-image: url("../img/sk-icons/icon_twitter.svg");
  mask-size: contain;
}

body.ie .icon.icon-twitter-green {
  background-size: contain;
  background-image: url("../img/sk-icons/icon_twitter_green.svg");
}

.icon.icon-twitter-lightgrey {
  background-size: contain;
  background-color: lightgrey;
  mask-image: url("../img/sk-icons/icon_twitter.svg");
  mask-size: contain;
}

body.ie .icon.icon-twitter-lightgrey {
  background-size: contain;
  background-image: url("../img/sk-icons/icon_twitter_lightgrey.svg");
}

.icon.icon-twitter-grey {
  background-size: contain;
  background-color: grey;
  mask-image: url("../img/sk-icons/icon_twitter.svg");
  mask-size: contain;
}

body.ie .icon.icon-twitter-grey {
  background-size: contain;
  background-image: url("../img/sk-icons/icon_twitter_grey.svg");
}