Угловые мерцающие значки

Question

Я реализовал простую кнопку с Angular 11 и значками начальной загрузки и начальной загрузки. Когда я маршрутизирую страницу, которая показывает кнопку, кнопка загружается немедленно. Но только по прошествии ~500 мс значок всплывает и выглядит как мерцающий.

Как мне избавиться от такого поведения? Это происходит также для значков в списках и т. Д.

       <button
  type="button"
  class="btn btn-secondary float-right w-25 mb-3"
 >
  <svg width="24" height="24">
    <use xlink:href="assets/bootstrap-icons/bootstrap-icons.svg#plus" />
  </svg>
  Test
</button>

Answer 1

Вы можете напрямую установить значки начальной загрузки в свой проект angular, используя ниже npm команда.

      npm i bootstrap-icons

Затем используйте значки следующим образом. (например: для + значок)

      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-plus" viewBox="0 0 16 16">
   <path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"/>
</svg>

Это избавит от мерцания.