Каково значение по умолчанию fontSet в значках Angular Material?

Question

У меня есть несколько пользовательских значков в моем приложении, которые отображаются путем установки свойства fontSet

<mat-icon fontSet="myFont" fontIcon="my-icon"></mat-icon>

Теперь я хотел бы быть последовательным и отображать значки угловых материалов, используя ихшрифт установлен так

<mat-icon fontSet="md" fontIcon="add"></mat-icon>

, но он не работает.Итак, я хочу знать, каково значение по умолчанию fontSet в значках углового материала?

Answer 1

чтобы использовать fontSet, вы должны объявить свой собственный шрифт:

@font-face {
  font-family: 'icomoon';
  src: url('path.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

у вас есть 2 варианта использовать его с угловым классом Mat-Icon

1) для применения

.MyIconClass
{
    font-family: 'MyFontFamily' !important;
}

2) Зарегистрируйтесь в AppComponent

constructor(iconRegistry: MatIconRegistry) {
   iconRegistry.registerFontClassAlias('MyFontFamily', 'MyIconClass');
}

Тогда вы сможете отобразить значок:

<mat-icon fontSet="MyIconClass" fontIcon="LigatureOrUnicodeToDisplay"></mat-icon>

или

<mat-icon fontSet="MyIconClass">LigatureOrUnicodeToDisplay</mat-icon>

Если вы похожи на меня и не хотите иметь больше параметров, просто замените .material-icons на свой собственный шрифт.

.material-icons {
  font-family: 'MyFontFamily';
...
}

, и тогда вы сможете использовать его следующим образом

LigatureToDisplay

, который я люблю.

Вы можете использовать эту ссылку, чтобы создать свою собственную коллекцию иконок с svg.

https://icomoon.io

счастливое кодирование.