/* MaterialDesignIcons.com */ $mdi-filename: "material-design-icons"; $mdi-font-name: "material-design-icons"; $mdi-font-family: "material-design-icons"; $mdi-font-weight: "regular"; $mdi-font-path: "../fonts" !default; $mdi-css-prefix: mdi !default; $mdi-version: "3.3.92" !default; @font-face { font-family: '#{$mdi-font-name}'; src: url('#{$mdi-font-path}/#{$mdi-filename}.eot?v=#{$mdi-version}'); src: url('#{$mdi-font-path}/#{$mdi-filename}.eot?#iefix&v=#{$mdi-version}') format('embedded-opentype'), url('#{$mdi-font-path}/#{$mdi-filename}.woff2?v=#{$mdi-version}') format('woff2'), url('#{$mdi-font-path}/#{$mdi-filename}.woff?v=#{$mdi-version}') format('woff'), url('#{$mdi-font-path}/#{$mdi-filename}.ttf?v=#{$mdi-version}') format('truetype'), url('#{$mdi-font-path}/#{$mdi-filename}.svg?v=#{$mdi-version}##{$mdi-filename}#{$mdi-font-weight}') format('svg'); font-weight: normal; font-style: normal; } $mdi-icons: ( account-outline: '\F013', atom: '\F767', cellphone-iphone: '\F120', check: '\F12C', email-outline: '\F1F0', link-variant: '\F339' ); %mdi, [class^='mdi-']::before, [class*='mdi-']::before { display: inline-block; font-family: '#{$mdi-font-name}' !important; font-size: 25px; font-style: normal; font-weight: normal; line-height: 0.5em; margin-left: -0.15em; text-align: center; text-decoration: inherit; width: 1em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* For safety - reset parent styles, that can break glyph codes*/ font-variant: normal; text-transform: none; } @function char($character-code) { @if function-exists("selector-append") { @return unquote("\"\\#{$character-code}\""); } @if "\\#{'x'}" == "\\x" { @return str-slice("\x", 1, 1) + $character-code; } @else { @return #{"\"\\"}#{$character-code + "\""}; } } @function mdi($name) { @if map-has-key($mdi-icons, $name) == false { @warn "Icon #{$name} not found."; @return ""; } @return char(map-get($mdi-icons, $name)); } @each $key, $value in $mdi-icons { .#{$mdi-css-prefix}-#{$key}:before { content: char($value); } } @mixin mdi($value) { &:before { @extend %mdi; @extend .#{$mdi-css-prefix}-#{$value}; } } .#{$mdi-css-prefix}-blank:before { content: "\F68C"; visibility: hidden; }