Используйте угловую иконку fontawesome при вводе текста заполнителя

Question

Я использую официальные компоненты Font Awesome Angular в приложении Angular 6.
Но я не могу найти способ добавить значок поиска в качестве заполнителя к элементу ввода, кроме добавления дополнительных шрифтов в мое приложение, что нежелательно.

  <div class="search-box">
    <input type="search" [(ngModel)]="searchText" placeholder="&#xf002; Search" />
  </div>

Answer 1

Поэтому я придумываю такой обходной путь: вместо

  <div class="search-box">
    <input type="search" [(ngModel)]="searchText" placeholder="&#xf002; Search" />
  </div>

Я добавляю заполнитель в соседний блок

  <div class="search-box">
    <input class="search-box-input" type="search" [(ngModel)]="searchText"/>
    <div class="search-box-placeholder-wrapper">
      <fa-icon [icon]="faSearch" class="search-box-placeholder"></fa-icon>
      <span>&nbsp;Search</span>
    </div>
  </div>

и добавил дополнительные стили CSS

.search-box {   
   position: relative;

  &-placeholder-wrapper {
    pointer-events: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 8px;  
   }

  &-input:focus + .search-box-placeholder-wrapper {
    display: none;  
  } 
}

Answer 2

Установите официальный шрифт-офигенный

npm install @fortawesome/fontawesome-free -s

Импортируйте шрифт в ваш файл styles.css

@import '@fortawesome/fontawesome-free/css/all.min.css';

Теперь вы можете использовать font-awesome обычным способом и искать иконки с официального сайта.