background-size: initial not working in IE10 and under - html

Question

Hi I have the following CSS class and dom element
<button [ngClass]="{ 'filter-icon-open': open, 'filter-icon-close': !open }">
</button>
css
.open-filter {
cursor: pointer;
float: right;
button {
width: 40px;
height: 40px;
background-repeat: no-repeat;
background-position: center;
background-size: initial;
}
button:hover {
background-image: url("./../../../../assets/images/ico_filter_over.png");
background-color: $dbsred;
border: none;
}
button:focus {
outline:none;
}
}
.filter-icon-open {
background-image: url("./../../../../assets/images/ico_filter_over.png");
background-color: red;
}
.filter-icon-close {
background-image: url("./../../../../assets/images/ico_filter.png");
border: solid #B3B3B3 1px;
}
It's working perfectly for chrome. But for IE the icon is big. How to solve this. newbie to CSS. can someone help. Thanks in advance.
Tried:
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./../../../../assets/images/ico_filter.png', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='./../../../../assets/images/ico_filter.png', sizingMethod='scale')";
but i see this part been commented out in chrome and it didnt worked as well.

Answer 1

initial is not supported on IE. For IE the permitted values for background-size
as per documentation are :
background-size: [ <length> | <percentage> | auto ] {1,2} | cover | contain [ , [ <length> | <percentage> | auto ] {1,2} | cover | contain ]*
Additionally, initial just sets the property to the default value of the property and for background-size the default value is auto. So you can use that directly or use any of the above values.

Answer 2

If the problem is that the open and close images are different sizes, You can use CSS to resize the images in the browser:
.filter-icon-open {
background-image: url("./../../../../assets/images/ico_filter_over.png");
background-color: red;
height : 100px;
width : 100px;
}
.filter-icon-close {
background-image: url("./../../../../assets/images/ico_filter.png");
border: solid #B3B3B3 1px;
height : 100px;
width : 100px;
}
This will force both the open and close image to be the same size, however, I personally recommend against that approach, since it could cause skewing or pixelation of the image.
A better solution is to resize the images using an image editing tool of your choice, such as Photoshop.