SVG mask-image not displaying in Firefox and Edge - css

Question

I have a problem with displaying svg as mask-image in the an older version of Firefox (52.8.1) and Microsoft Edge (40.15063.674.0).
In this version Firefox I am getting an error incorrect property value. And the svg look like squares and rectangles filed with background color.
In the new version of Firefox all works great, also I have no problems in Chrome and Opera with displaying the svg as mask-image.
What could be the reason for this? I understand that Edge is so good like IE was, but I would expect such problems in Firefox because it had a partial support for mask-image back then.
Is there a work around for this issue ?
The css:
float:left;
content: '';
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 100%;
mask-size: 100%;
-webkit-mask-image: url(#{$images}/icon-date.svg);
mask-image: url(#{$images}/icon-date.svg);
width: 15px;
height: 16px;
background: $red-color;
margin: 3px 7px 0 0;
and this is how my svg looks:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Warstwa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="55.438px" height="56.114px" viewBox="0 0 55.438 56.114" enable-background="new 0 0 55.438 56.114" xml:space="preserve">
<g>
<path fill="#3A444F" d="M50.438,5.414h-5.323v3.5h5.323c0.813,0,1.5,0.688,1.5,1.5v9.217H3.5v-9.217c0-0.813,0.687-1.5,1.5-1.5
h6.383v4.477c0,0.967,0.784,1.75,1.75,1.75s1.75-0.783,1.75-1.75V8.914h0.011v-3.5h-0.011V1.75c0-0.966-0.784-1.75-1.75-1.75
s-1.75,0.784-1.75,1.75v3.664H5c-2.75,0-5,2.25-5,5v40.7c0,2.75,2.25,5,5,5h45.438c2.75,0,5-2.25,5-5v-40.7
C55.438,7.664,53.188,5.414,50.438,5.414z M50.438,52.614H5c-0.813,0-1.5-0.686-1.5-1.5V23.131h48.438v27.983
C51.938,51.928,51.251,52.614,50.438,52.614z"/>
<path fill="#3A444F" d="M37.633,13.391c0,0.967,0.783,1.75,1.75,1.75s1.75-0.783,1.75-1.75V1.75c0-0.966-0.783-1.75-1.75-1.75
s-1.75,0.784-1.75,1.75v3.664h-5.618v3.5h5.618V13.391z"/>
<path fill="#3A444F" d="M24.508,13.391c0,0.967,0.784,1.75,1.75,1.75s1.75-0.783,1.75-1.75V8.914h0.007v-3.5h-0.007V1.75
c0-0.966-0.784-1.75-1.75-1.75s-1.75,0.784-1.75,1.75v3.664h-5.614v3.5h5.614V13.391z"/>
<g>
<g>
<g>
<g>
<rect x="9.841" y="35.909" fill="#3A444F" width="4" height="4"/>
</g>
</g>
<g>
<g>
<rect x="17.815" y="35.909" fill="#3A444F" width="4" height="4"/>
</g>
</g>
<g>
<g>
<rect x="25.792" y="35.909" fill="#3A444F" width="4" height="4"/>
</g>
</g>
<g>
<g>
<rect x="33.767" y="35.909" fill="#3A444F" width="4.001" height="4"/>
</g>
</g>
<g>
<g>
<rect x="41.742" y="35.909" fill="#3A444F" width="4" height="4"/>
</g>
</g>
</g>
<g>
<g>
<g>
<rect x="17.815" y="27.926" fill="#3A444F" width="4" height="4"/>
</g>
</g>
<g>
<g>
<rect x="25.792" y="27.926" fill="#3A444F" width="4" height="4"/>
</g>
</g>
<g>
<g>
<rect x="33.767" y="27.926" fill="#3A444F" width="4.001" height="4"/>
</g>
</g>
<g>
<g>
<rect x="41.742" y="27.926" fill="#3A444F" width="4" height="4"/>
</g>
</g>
</g>
<g>
<g>
<g>
<rect x="9.841" y="43.893" fill="#3A444F" width="4" height="4"/>
</g>
</g>
<g>
<g>
<rect x="17.815" y="43.893" fill="#3A444F" width="4" height="4"/>
</g>
</g>
<g>
<g>
<rect x="25.792" y="43.893" fill="#3A444F" width="4" height="4"/>
</g>
</g>
<g>
<g>
<rect x="33.767" y="43.893" fill="#3A444F" width="4.001" height="4"/>
</g>
</g>
</g>
</g>
</g>
</svg>