استفاده از icon ها در شبه المنت ها

اگه از گوگل آیکون استفاده کنی میشه مثلو مقدار بیفر رو بدی search و اون المنت کلاس گوگل فونت رو داشته باشه میشه
مثلا:

<span class="search material-symbols-outlined"></span>

.search:before {
    content: 'search';
}

بستگی به نحوه استفاده از آیکون هاتون داره. مثلا در حالت FontAwesome به شکل زیر میشه:

el::before{
    content: "\e5c5";
    font-family: Font Awesome 6 Pro;
    font-weight: 400;
    display: block;
    width: 50px;
    aspect-ratio: 1;
    //...
}

راه های مختلفی هست ولی من برای اینکه کد بیشتری تو css ام نوشته نشه ترجیح میدم از یک div استفاده کنم

<div class="my-icon">

    <svg>...</svg>
    <span>my paragraph</span>

</div>