угловые 6 пользовательских значков материала с поддержкой лигатуры - PullRequest
Новая
       36

угловые 6 пользовательских значков материала с поддержкой лигатуры

0 голосов
/ 05 июля 2018

Можно ли создавать собственные иконки материалов с поддержкой лигатуры. В настоящее время я использую svgIcon для получения пользовательских значков, Есть ли способ добиться лигатуры с поддержкой пользовательских значков?

Мой текущий фрагмент кода приведен ниже

app.component.ts 

import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { MatIconRegistry } from '@angular/material';

  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
  })
  export class AppComponent {
    title = 'app';

    constructor(
      iconRegistry: MatIconRegistry,
      sanitizer: DomSanitizer
    ) {
      iconRegistry.addSvgIcon('key',
        sanitizer.bypassSecurityTrustResourceUrl('assets/icons/key.svg')
      );
      iconRegistry.addSvgIcon('user',
        sanitizer.bypassSecurityTrustResourceUrl('assets/icons/user.svg')
      );
    }

  }

login.component.html 

<mat-form-field>
  <input matInput placeholder="Username" formControlName="username">
  <mat-icon matPrefix svgIcon="user"></mat-icon>
  <mat-error *ngIf="username.invalid">Username is required</mat-error>
</mat-form-field>

<mat-form-field>
  <input matInput type="password" placeholder="Password" formControlName="password">
  <mat-icon matPrefix svgIcon="key"></mat-icon>
  <mat-error *ngIf="password.invalid">Password is required</mat-error>
</mat-form-field>

1 Ответ

0 голосов
/ 23 февраля 2019

Уверен, что это возможно:

Шаг 1) Получить все значки SVG.

Шаг 2) Создайте свой шрифт с помощью пользовательской лигатуры.

Это инструмент для создания собственной библиотеки шрифтов с поддержкой лигатуры. https://icomoon.io

Шаг 3:

Объявите свой собственный шрифт. 

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

Шаг 4: Замените .material-значки собственным шрифтом 

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

или объявите свой собственный набор шрифтов, чтобы вы могли работать с обоими. 

//Register to AppComponent

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

Последний шаг. 

<mat-icon>LigatureToDisplay</mat-icon>

или 

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

Вот небольшой учебник.

https://medium.com/@buddhiv/add-a-custom-icon-font-in-your-application-b1e07a687953

...