CSS image stuck at corner - html

Question

In this photo I added a div arrow using CSS I turned it into an arrow. In the center of the div/arrow i need to put an image.
This icon inside the grid is not changing the position to center without disturbing the css of the arrow created using grid.
.arrow {
position: relative;
text-indent: 30px;
text-align: center;
background-color: #E6EAEF;
display: inline-block;
zoom: 1;
*display: inline;
font-size: 1rem;
text-align: center;
padding: auto 0;
align-items: center;
height: 24px;
margin: 5px;
padding: 5px;
/* tweaked this */
font-size: 1rem;
line-height: 50px;
box-shadow: 0 8px 6px -6px black;
}
.arrow:after {
content: "";
position: absolute;
width: 0;
height: 0;
left: 0;
border-top: 17px solid transparent;
border-left: 12px solid #E6EAEF;
border-bottom: 17px solid transparent;
margin: -5px 10px 0 5px;
}
.arrow:before {
content: "";
position: absolute;
width: 0;
height: 0;
left: 0;
border-top: 17px solid transparent;
border-left: 10px solid white;
border-bottom: 17px solid transparent;
margin: -5px 0 0 0;
}
.arrow-icon {
display: inline-block;
position: relative;
margin-top: 0px;
margin-left: 0px;
padding-left: 0px;
height: 15px !important;
}
<div class="arrow">
<img class="arrow-icon" src="https://www.freeiconspng.com/uploads/magnifying-glass-icon-13.png" alt="">
</div>
`

Answer 1

In case the image has no action purpose, such as click events, and is for display purposes only, you can place it in the background.
.arrow {
position: relative;
text-indent: 30px;
text-align: center;
/* All background properties are combined in here. */
/* The CALC() is just to nudge it to the right so it looks better on the arrow. */
background: #E6EAEF url(https://www.freeiconspng.com/uploads/magnifying-glass-icon-13.png) calc(50% + 4px) 50% no-repeat;
background-size: 17px; /* Sets the icon size. */
display: inline-block;
zoom: 1;
*display: inline;
font-size: 1rem;
text-align: center;
padding: auto 0;
align-items: center;
height: 24px;
margin: 5px;
padding: 5px;
/* tweaked this */
font-size: 1rem;
line-height: 50px;
box-shadow: 0 8px 6px -6px black;
width: 50px;
}
.arrow::after {
content: "";
position: absolute;
width: 0;
height: 0;
right: -20px;
border-top: 17px solid transparent;
border-left: 12px solid #E6EAEF;
border-bottom: 17px solid transparent;
margin: -5px 10px 0 5px;
}
.arrow::before {
content: "";
position: absolute;
width: 0;
height: 0;
left: 0;
border-top: 17px solid transparent;
border-left: 10px solid white;
border-bottom: 17px solid transparent;
margin: -5px 0 0 0;
}
<div class="arrow">
</div>

Answer 2

You can set position: absolute; to .arrow-icon and then center it with top: 50%; left: 50%;. Translate is required to center the center of image.
.arrow {
position: relative;
text-indent: 30px;
text-align: center;
background-color: #E6EAEF;
display: inline-block;
zoom: 1;
*display: inline;
font-size: 1rem;
text-align: center;
padding: auto 0;
align-items: center;
height: 24px;
margin: 5px;
padding: 5px;
/* tweaked this */
font-size: 1rem;
line-height: 50px;
box-shadow: 0 8px 6px -6px black;
}
.arrow:after {
content: "";
position: absolute;
width: 0;
height: 0;
left: 0;
border-top: 17px solid transparent;
border-left: 12px solid #E6EAEF;
border-bottom: 17px solid transparent;
margin: -5px 10px 0 5px;
}
.arrow:before {
content: "";
position: absolute;
width: 0;
height: 0;
left: 0;
border-top: 17px solid transparent;
border-left: 10px solid white;
border-bottom: 17px solid transparent;
margin: -5px 0 0 0;
}
.arrow-icon {
display: inline-block;
position: absolute;
margin-top: 0px;
margin-left: 0px;
padding-left: 0px;
height: 15px !important;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 99; /*The Icon was overlapped by some part of arrow*/
}
<div class="arrow">
<img class="arrow-icon" src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/search-512.png" alt="">
</div>

Answer 3

Use display:grid and place-items:center this CSS property will center the search icon.
.arrow{
margin:50px 100px;
background:#e6e9ee;
height:50px;
width:80px;
display:grid;
place-items:center;
position:relative;
padding-left:10px;
}
.arrow::after{
content:'';
position:absolute;
border-width:25px 15px;
border-style:solid;
border-color:#e6e9ee;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:transparent;
right:-30px;
}
.arrow::before{
content:'';
position:absolute;
border-width:25px 15px;
border-style:solid;
border-color:#fff;
border-top-color:transparent;
border-right-color:transparent;
border-bottom-color:transparent;
left:0px;
}
<div class="arrow">
<img class="arrow-icon" src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/search-512.png" height="20">
</div>