Adding search icon to my search word on the navigation bar - html

Question

Currently I'm practicing how to code by building a similar website and I got stuck with this step which's adding a search word together with the search icon just like in the shown image.
I did type the code for the word "Sök" which's in Swedish means "Search" but I'm curious how to add the icon so it looks the same.

Answer 1

const icon = document.querySelector('.icon');
const search = document.querySelector('.search').value;
function searchbar() {
icon.style.display = "block";
return
}
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
width: 100%;
display: grid;
place-items: center;
font-family: Arial, Helvetica, sans-serif;
background-color: rgb(9, 5, 31);
}
.container {
position: relative;
}
.container .icon {
display: none;
position: absolute;
top: 50%;
right: 10px;
height: 20px;
transform: translateY(-50%);
}
.container .search {
width: 300px;
height: 40px;
border-radius: 9999px;
padding-left: 20px;
}
<div class="container">
<img class="icon" src="https://img.icons8.com/ios-filled/50/000000/search--v1.png" />
<input class="search" oninput="searchbar()" on type="text" placeholder="search">
</div>
if you want to add the search icon next to the searched word just do this:
put the icon and the search bar inside the same parent and set position:absolute; to the icon and position: relative; to the parent that contains both the input and icon.
for the appearance of the search icon when typing:
just set display: none; to it, and use javascript when (input.value > 1) , the display of the icon will be (display: block;).
there are many ways to achieve that