svg icons are not aligned to center of a container

Question

I am designing a list and there i am using svg icons to show the items of list. Now, my icons and text are aligned properly. It is in corner like this below:

Here is my code:

<div
                v-for="item in fav"
                :key="item.id"
                class="fav-list-item mb-2"
            >
            <div class="del_fav" @click="handleListClick(item)">
                <svg-icon v-if="!favEdit" name="building" />
                <svg-icon v-else name="delete" fill="#E30000" />
            </div>
            <div class="pl-2">
                {{ item.fav }}
            </div>
            </div>

css code

    .fav-list-item {
    display: flex;
    align-items: center;
    margin-left: 30px;
    border: .5px solid rgba(0,0,0,0.1);
    border-radius: 5px;
    width: 65%;
    min-height: 35px;

    > div {
        display: flex;
        &:first-of-type {
            background-color: #e8e8ed;
            min-height: 35px;
            min-width: 20%;
        }
    }
    .pl-2 {
       font-size: 14px;
       font-weight: 500;
    }
}

Answer 1

Add a block of css

.del_fav {

display:flex;
justify-content:center;
align-items:center;
flex-direction:row;

}

Answer 2

Looks to me like you're only centering .del_fav itself, but not its children (the svg). Maybe try adding something like this:

.del_fav {
  display: flex;
  align-items: center;
  justify-content: center;
}