How do I perform an 'if' statement within a nested sass map (SCSS)?

As I'm new to sass (SCSS) it would appear that my ambition currently outstrips my abilities. Could someone assist me with the following task.

---

BACKGROUND

We currently have an icon system with two distinct file formats; one is a PNG and the other an SVG. Some of our icons have BOTH file types, some have either PNG or SVG. I would like to be able to list them out separately.

Here is my SCSS variable map.

$image-path: "http://ift.tt/1Gj8KrL";
$icons-map: (
    tick: (
        filename:       icons_tick,
        has-png:            true,
        has-svg:            false,
    ),          
    secure: (
        filename:       icons_secure,
        has-png:            true,
        has-svg:            true,
    ),
    checkout: (
        filename:       icons_checkout,
        has-png:            false,
        has-svg:            true,
    ),
);

And how I am trying to list them out...

/* Standard (PNG) Icons */
@each $icon-type, $icon-file in $icons-map {
    @if $has-png == "true" { 
        .icon-#{$icon-type}:after {
            background-image: url('#{$image-path}/png/#{$filename}.png');
        }
    }
}

/* Advanced SVG icons (progressive enhancement for newer mobiles, retina-style displays, etc) */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
    @each $icon-type, $icon-file in $icons-map {
        @if $has-svg == "true" { 
            .icon.#{$icon-type}:after {
                background-image: url('#{$image-path}/svg/#{$filename}.svg');
            }
        }
    }
}

Only problem is that it doesn't seem to be going to plan...any ideas where I'm going wrong with this? I assume it's how I'm looping over the nested map, or how I'm setting my 'if' statement.

I would have expected the output to be something like this;

/* Standard (PNG) Icons */
.icon.tick {
      background-image: url('http://ift.tt/1M6qtD6');
    }
    .icon.secure {
      background-image: url('http://ift.tt/1Gj8KrN');
    }
/* Advanced SVG icons (progressive enhancement for newer mobiles, retina-style displays, etc) */
    @media only screen and (-webkit-min-device-pixel-ratio: 2),
        only screen and (     -o-min-device-pixel-ratio: 2/1),
        only screen and (        min-device-pixel-ratio: 2),
        only screen and (                min-resolution: 192dpi),
        only screen and (                min-resolution: 2dppx) {
    .icon.secure {
      background-image: url('http://ift.tt/1M6qvLl');
    }
    .icon.checkout {
      background-image: url('http://ift.tt/1Gj8KrP');
    }

}

Keep getting the error that $has-png and $has-svg is an undefined variable.

Thanks for your help.