Remove space between Material icon and surrounding div

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>