Personal project issue with moving icon

[adamaskaj94]

So I’ve been coding my personal project for a little now but I’ve run into an issue

I’m trying to add a search icon next to the word search in my code and that’s working completely fine now all I want to do is move the icon slightly because it looks misplaced - but I’m struggling to do that

Here is the relevant code for the problem I’m facing

HTML

<!-- google font SYMBOL links start here -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
  <style>
.material-icon {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24
}
    </style>
  
    
      <!-- google font SYMBOL links END here -->

This is the embedded link so my browser has the icon i want (search icon)

HTML ( these are class names for the css styles i used to style my search icon)

<div class="container">
 <!-- The .container class defines the styles for the container element, which wraps the search box.-->  
  <div class="search-box"></div>
  </div>
 <!-- The .search-box class defines the styles for the search box, including its positioning properties within the container.-->

 <!-- The .material-symbols-outlined class defines the styles for the search icon.-->
 

HTML (again :0) this is a nav link and two class names

<li>
  <a href="#" class="nav-color">
  <i class="material-symbols-outlined material-icon">search</i> Search
  </a>

CSS (class selectors for above mostly)

/* The .material-symbols-outlined class defines the styles for the search icon.*/
.material-symbols-outlined{

 
}

/* container class defines styles for the container element which wraps the search box*/
.container{
 position:relative;
  width: 5px;
  height: 5px;
  background-color: ##fcfcfc;
}

/*defines the styles for the search box including its positioning properties within the container*/
.search-box{
  position: absolute;
    top: 20%;
    left: 700%;
    width: 20px;
    height: 20px;
  background-color:#bfb8b8;
  transform:translate:(-50%, -50%);
}
/*defines the styles for the search icon*/
.material-icon{
margin-top:5px;
  
}

I have tried some things to fix it between margin and padding the main problem is that it doesnt move my search icon down it moves all of my content down and then search icon stays where it is
can anyone help?
And also I’m currently using inspect to debug (ctrl , shift and i its my first time debugging so

[Lucasl]

Translate could potentially work for shifting the icon around relative to where it was (x,y):

.material-symbols-outlined {
  transform: translate(0px, 0.3em);
}