How can I make the edit icon styling using only pure CSS?

I want to design the above image using pure CSS.

So far, I am able to only design without the edit icon.

Following is the HTML and CSS I have come up with so far:

<div>
    <img src="static\assets\images\avatar.jpg" class="main-profile-img" />
</div>

<style>
    .main-profile-img {
        width: 140px;
        height: 140px;
        border-radius: 50%;
        border-style: solid;
        border-color: #FFFFFF;
        box-shadow: 0 0 8px 3px #B8B8B8;
    }
</style>

I just need the HTML and CSS code for the edit-icon on the top-right.

Solution

div {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  border-style: solid;
  border-color: #FFFFFF;
  box-shadow: 0 0 8px 3px #B8B8B8;
  position: relative;
}

div img {
  height: 100%;
  width: 100%;
  border-radius: 50%;
}

div i {
  position: absolute;
  top: 20px;
  right: -7px;
  /* border: 1px solid; */
  border-radius: 50%;
  /* padding: 11px; */
  height: 30px;
  width: 30px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background-color: white;
  color: cornflowerblue;
  box-shadow: 0 0 8px 3px #B8B8B8;
}

<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet" />
<div>
  <img src="https://cdn.pixabay.com/photo/2016/08/08/09/17/avatar-1577909_960_720.png" class="main-profile-img" />
  <i class="fa fa-edit"></i>
</div>