@ h2qutc / angular -материал-компоненты datetime-picker и SVG / сторонние иконки

Question

В проекте, над которым я работаю, используются значки Font Awesome SVG и Angular Значки материалов , как описано здесь , пока что все хорошо. Требуется средство выбора даты и времени, и поскольку Angular Материал пока не предоставляет компонент Я выбрал @ angular -материал-компоненты / Datetime-picker , предложенный в этот SO-ответ @hgho (автор компонента).

Проблема заключается в том, что средство выбора времени использует значки шрифтов материала , что противоречит подходу, описанному выше. Без загруженного веб-шрифта mat-icon отображает лигатуры в виде простого текста, что я считаю недопустимым:

Я ищу решение, которое:

1. Исправляет значки некоторым образом.
2. Позволяет использовать значки Font Awesome вместо "expand_more" / "expand_less" / "done" для согласованности всего приложения.
3. Минимизирует количество дополнительных данных. Конечно, я могу включить весь шрифт Material Icons только для трех значков, но только в качестве крайней меры.

Answer 1

Я оценил несколько подходов:

1. Посмотрите, предоставляют ли API mat-icon или MatIconRegistry что-нибудь подходящее, возможность зарегистрировать значок SVG для использования в качестве лигатуры значка шрифта была бы идеальной , Я обнаружил соответствующую проблему , но она еще не решена.
2. Разветвите компонент, измените шаблон. Это должно сработать, но теперь вам придется поддерживать ответвление, и обновления зависимостей станут менее плавными.
3. Проверьте, есть ли у API компонента входные данные для пользовательского значка ng-template. Ответ - «нет», но компонент ввода в один и тот же файл поддерживает пользовательский значок , так что, возможно, что-то подобное будет добавлено и в таймер? Вот проблема, отслеживающая этот .
4. Создание собственного облегченного шрифта с тремя значками. В этом выпуске предлагается использовать Fontello для таких случаев, но пока не поддерживает значки материалов , поэтому я использовал Icomoon . Результирующий WOFF составляет 1,8 КБ без gzip.

Подробное описание нестандартного шрифта (# 4):

1. Go до Icomoon выберите значки из набора или загрузите свой собственный.
2. Убедитесь, что экспортированные лигатуры глифов соответствуют вашему варианту использования.
3. Загрузите шрифт в ваше приложение, добавьте недостающие стили. Стили те же, что и , загруженные из Google Fonts , но с вашим файлом нестандартного шрифта в @font-face {src: }.

// @angular-material-components/datetime-picker requires Angular Material icon ligatures font,
// but we use Font Awesome SVG icons.

// The custom font includes only three icons required for datetime-picker:
// 1. expand_more
// 2. expand_less
// 3. done
@font-face {
  font-family: 'custom-material';
  src: url('assets/fonts/custom-material.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

ngx-mat-datetime-content {
  // The same style as from Material Icons from Google Fonts, which we don't import
  .material-icons {
    font-family: 'custom-material';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
  }
  .mat-icon {
    background-repeat: no-repeat;
    display: inline-block;
    fill: currentColor;
    height: 24px;
    width: 24px;
  }
}

Результат: