Icons are scoped in a veird way (CSS scoping Vue.js 3)

I am not 100% sure it is the scoping issue here, but here is the thing.

HTML:

<div class="search__sort">
        <div class="search__bar">
            <unicon  class="search__icon"  name="search" fill="#7f7d7d"/>
            <input class="search" v-model="search" placeholder="Search for a house">
            <unicon class="clear__icon" name="times" fill="#7f7d7d" @click="resetInput()" v-if="search != '' "/>
        </div>
        
        <button :class="[sortBy === 'price' ? sortDirection : '']" @click="sort('price')">Price</button>
        <button :class="[sortBy === 'size' ? sortDirection : '']" @click="sort('size')">Size</button>
    </div> 

CSS:

<style lang="scss" scoped>
.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;
        }
    }
}
</style>

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 https://github.com/antonreshetov/vue-unicons