title: Icons are scoped in a veird way (CSS scoping Vue.js 3)
body: <p>I am not 100% sure it is the scoping issue here, but here is the thing.</p>
  <p>HTML:</p>
  <pre><code>&lt;div class=&quot;search__sort&quot;&gt;
          &lt;div class=&quot;search__bar&quot;&gt;
              &lt;unicon  class=&quot;search__icon&quot;  name=&quot;search&quot; fill=&quot;#7f7d7d&quot;/&gt;
              &lt;input class=&quot;search&quot; v-model=&quot;search&quot; placeholder=&quot;Search for a house&quot;&gt;
              &lt;unicon class=&quot;clear__icon&quot; name=&quot;times&quot; fill=&quot;#7f7d7d&quot; @click=&quot;resetInput()&quot; v-if=&quot;search != '' &quot;/&gt;
          &lt;/div&gt;
          
          &lt;button :class=&quot;[sortBy === 'price' ? sortDirection : '']&quot; @click=&quot;sort('price')&quot;&gt;Price&lt;/button&gt;
          &lt;button :class=&quot;[sortBy === 'size' ? sortDirection : '']&quot; @click=&quot;sort('size')&quot;&gt;Size&lt;/button&gt;
      &lt;/div&gt; 
  </code></pre>
  <p>CSS:</p>
  <pre><code>&lt;style lang=&quot;scss&quot; scoped&gt;
  .search__sort {
      margin-left: 290px;
  
      .search__bar{
          position: relative;
          display: flex;
          min-width: 100px;
  
          .search__icon{
              position: absolute;
              top: 6px;
              left: 8px;
              width: 14px;
          }
  
          .clear__icon{
              position: absolute;
              top: 8px;
              right: 8px;
              width: 10px;
              cursor: pointer;
          }
  
          .search {
              border: none;
              border-radius: 5px;
              height: 20px;
              width: 20%;
              padding: 2px 23px 2px 30px;
              outline: 0;
              background-color: #ded9d9;
          }
  
          .search:hover, .search:focus {
              border: 1.5px solid #009688;
              background-color: white;
          }
      }
  }
  &lt;/style&gt;
  </code></pre>
  <p>In the inspector the position of both icons (unicons) are static. Is there a way to fix that? In CSS I tried to make it a bit different, but it seems like those icons are not responding to any CSS entry in this case. I am using the Unicons <a href="https://github.com/antonreshetov/vue-unicons" rel="nofollow noreferrer">https://github.com/antonreshetov/vue-unicons</a></p>
  <p><a href="https://i.stack.imgur.com/THYCa.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/THYCa.png" alt="" /></a></p>