Generated by SassMeister.com.

SassMeister-input.scss

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

@import "bourbon/bourbon";

$icon-family-name: 'icons' !default;
$icon-prefix: 'icon' !default;

$icon-set-map: (
	bullet: '\e001',
	chevron-down: '\e002',
	chevron-large: '\e003',
	chevron-left: '\e004',
	chevron-right: '\e005',
	chevron-up: '\e006',
	close: '\e007',
	cog: '\e008',
	exclamation: '\e00a',
	google-dev: '\e00b',
	hash: '\e00c',
	introduction-to-media: '\e00d',
	lessons: '\e00e',
	menu: '\e00f',
	minus: '\e010',
	multi-device-layouts: '\e011',
	performance: '\e012',
	plus: '\e013',
	question: '\e014',
	slash: '\e015',
	star: '\e016',
	tick: '\e017',
	user-input: '\e018',
	twitter: '\e800',
	github: '\e801',
	facebook: '\e802',
	gplus: '\e803',
	folder-open: '\e804',
	rss: '\e805',
	html5: '\e806',
	phone: '\e807',
	folder: '\e808',
	address: '\e809',
	email: '\e80a',
	globe: '\e80b',
	user: '\e80c',
	calendar: '\e80d',
	search: '\e80e',
	resize-full: '\e80f',
	chat: '\e810',
	tag: '\e811',
	chevron-double-right: '\e812',
	quotation-mark-right: '\e813',
	basket: '\e814',
	filter: '\e815',
);


/* # Icon set

http://hugogiraudel.com/2014/05/05/bringing-configuration-objects-to-sass/
http://frontendgods.com/sass-mixins-with-default-parameters-using-maps/

Styleguide components.icons.icon-set
*/
@mixin icon-set-init($icon-set-map: null){
  @if $icon-set-map{
    @each $name, $code in $icon-set-map{
      .icon-#{$name}:before{
        content:$code;
      }
    }
  }
  @else{
    @error "Vous n'avez pas fourni de icon-map";
  }
}

@include icon-set-init($icon-set-map);
/* # @mixin iconify

Markup:
<a href="" class="btn test-btn">Link Text</a>


@mixin iconify
@param $icon {string}                       - icon name
@param $position [before !default, after]   - Position of the icon
@param $margin   (5px default)              - Si avant ou après le contenu, il est possible de gérer l'espace
@param $replace {boolean} (false !default)  - Remplace le contenu
@see                                        - Inspiré de <http://jshak.es/easy-icomoon-icons-with-sass/>
$icon-family-name ('icons' !default)        - Nom de l'icon font ex:`font-awesome, icomoon`
$icon-prefix   ('icon' !default)            - Prefix des classes css sans le tiret ex:`icn, icone, icon`


Styleguide components.icons.icon-utils
*/

@mixin iconify($icon, $position: "before", $margin: 5px, $replace: false) {
  // on récupère l'icone dans la maps icon-set
  @if map-has-key($icon-set-map,$icon){
    
    // If we're replacing the text, set font-size to 0
    @if $replace {
      font-size: 0;
    }
    // Pseudo-element properties
    &:#{$position} {
        /*@extend .#{$icon-prefix}-#{$icon};*/
        content: map-get($icon-set-map,$icon);
        
        font-family: #{$icon-family-name};
        speak: none;
        font-style: normal;
        font-weight: normal;
        font-variant: normal;
        text-transform: none;
        line-height: 1;
        
        @if $replace==false{
            @if $position=="before"{
                margin-right: $margin;
            }
            @if $position=="after"{
                margin-left: $margin;
            }
        }
        
        @if $replace {
          font-size: 1rem;
        }    
        @content;
    }
  }@else {
      @error '@mixin Iconify : Impossible de trouver l\'icone '+$icon ;
  }
}

.test-btn {
    // Visually replace the contents of the element with the search icon
    @include iconify("email", "after", 15px) {
      font-size: 20px;
    }
}

SassMeister-output.css

@charset "UTF-8";
/* # Icon set

http://hugogiraudel.com/2014/05/05/bringing-configuration-objects-to-sass/
http://frontendgods.com/sass-mixins-with-default-parameters-using-maps/

Styleguide components.icons.icon-set
*/
.icon-bullet:before {
  content: "";
}

.icon-chevron-down:before {
  content: "";
}

.icon-chevron-large:before {
  content: "";
}

.icon-chevron-left:before {
  content: "";
}

.icon-chevron-right:before {
  content: "";
}

.icon-chevron-up:before {
  content: "";
}

.icon-close:before {
  content: "";
}

.icon-cog:before {
  content: "";
}

.icon-exclamation:before {
  content: "";
}

.icon-google-dev:before {
  content: "";
}

.icon-hash:before {
  content: "";
}

.icon-introduction-to-media:before {
  content: "";
}

.icon-lessons:before {
  content: "";
}

.icon-menu:before {
  content: "";
}

.icon-minus:before {
  content: "";
}

.icon-multi-device-layouts:before {
  content: "";
}

.icon-performance:before {
  content: "";
}

.icon-plus:before {
  content: "";
}

.icon-question:before {
  content: "";
}

.icon-slash:before {
  content: "";
}

.icon-star:before {
  content: "";
}

.icon-tick:before {
  content: "";
}

.icon-user-input:before {
  content: "";
}

.icon-twitter:before {
  content: "";
}

.icon-github:before {
  content: "";
}

.icon-facebook:before {
  content: "";
}

.icon-gplus:before {
  content: "";
}

.icon-folder-open:before {
  content: "";
}

.icon-rss:before {
  content: "";
}

.icon-html5:before {
  content: "";
}

.icon-phone:before {
  content: "";
}

.icon-folder:before {
  content: "";
}

.icon-address:before {
  content: "";
}

.icon-email:before {
  content: "";
}

.icon-globe:before {
  content: "";
}

.icon-user:before {
  content: "";
}

.icon-calendar:before {
  content: "";
}

.icon-search:before {
  content: "";
}

.icon-resize-full:before {
  content: "";
}

.icon-chat:before {
  content: "";
}

.icon-tag:before {
  content: "";
}

.icon-chevron-double-right:before {
  content: "";
}

.icon-quotation-mark-right:before {
  content: "";
}

.icon-basket:before {
  content: "";
}

.icon-filter:before {
  content: "";
}

/* # @mixin iconify

Markup:
<a href="" class="btn test-btn">Link Text</a>


@mixin iconify
@param $icon {string}                       - icon name
@param $position [before !default, after]   - Position of the icon
@param $margin   (5px default)              - Si avant ou après le contenu, il est possible de gérer l'espace
@param $replace {boolean} (false !default)  - Remplace le contenu
@see                                        - Inspiré de <http://jshak.es/easy-icomoon-icons-with-sass/>
$icon-family-name ('icons' !default)        - Nom de l'icon font ex:`font-awesome, icomoon`
$icon-prefix   ('icon' !default)            - Prefix des classes css sans le tiret ex:`icn, icone, icon`


Styleguide components.icons.icon-utils
*/
.test-btn:after {
  /*@extend .icon-email;*/
  content: "";
  font-family: icons;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  margin-left: 15px;
  font-size: 20px;
}