Remove space between Material icon and surrounding div - html

Question

I'm trying to remove the ring around a material icon that I'm using as a close icon on a draggable element.
Here's a picture of the element (I've changed the background to red for you to highlight the problem), I want to remove the red outer circle so the nice border of the element goes all the way to the edge of the grey circle:
Here's the HTML and CSS for the element and the icon:
HTML:
<div class="print-element">
Tag Number
<mat-icon class="resize-circle">highlight_off</mat-icon>
</div>
CSS:
.print-element {
min-width: 175px;
min-height: 45px;
border: solid 1px #ccc;
color: rgba(0, 0, 0, 0.87);
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
background: #fff;
border-radius: 4px;
margin-right: 25px 25px 15px 0px;
cursor: move;
position: relative;
z-index: 1;
box-sizing: border-box;
padding: 10px 50px 10px 10px;
transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.resize-circle{
position: absolute;
top: -10px;
right: -10px;
background-color: white;
border: .1px solid white;
border-radius: 50%;
color: #aaa;
cursor: pointer;
}
.mat-icon {
background-repeat: no-repeat;
display: inline-block;
fill: currentColor;
height: 24px;
width: 24px;
}
Now I can change the size of the mat-icon, but that results in the below:
using:
.mat-icon {
background-repeat: no-repeat;
display: inline-block;
fill: currentColor;
height: 20px;
width: 20px;
}
yields:
Here's a stackblitz all set up and ready to go: https://stackblitz.com/edit/angular-m7wwvr?file=src%2Fstyles.scss
Here's what I want it to look like:
Even pointers in the right direction would help.

Answer 1

Check edited URL for the changes in HTML and CSS
https://stackblitz.com/edit/angular-m7wwvr-xrmyje?file=src/styles.scss

Answer 2

Ok here is an answer. I used #Srinivas Bendkhale answer to reach this result.
what I did was wrapping the icon with a span and give it a fix hight and width then all I had to do was to hide the overflow .
That's how it looks in my browser.
.print-element {
min-width: 175px;
min-height: 45px;
border: solid 1px #ccc;
color: rgba(0, 0, 0, 0.87);
display: inline-flex;
justify-content: center;
align-items: center;
text-align: center;
background: #fff;
border-radius: 4px;
margin-right: 25px 25px 15px 0px;
cursor: move;
position: relative;
z-index: 1;
box-sizing: border-box;
padding: 10px 50px 10px 10px;
transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.resize-circle {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
border: .1px solid white;
color: #aaa;
cursor: pointer;
}
span {
width: 20px;
height: 20px;
background: white;
position: absolute;
top: -7px;
border-radius: 50%;
right: -7px;
overflow: hidden;
}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="print-element">
Tag Number
<span><i class="material-icons resize-circle">highlight_off</i></span>
</div>