Как правильно настроить компоненты значков материалов для отображения значков? - PullRequest
Новая
       7

Как правильно настроить компоненты значков материалов для отображения значков?

1 голос
/ 19 сентября 2019

Несмотря на тщательное выполнение шагов, показанных на https://www.youtube.com/watch?v=wI6kQAORiVg, мне не удается отобразить mat-icon на моей угловой странице.Пожалуйста, помогите мне понять, где я иду не так.

Ниже приведены шаги, которые я предпринял, пытаясь добавить значок на мою угловую страницу.

Я начинаю с добавления ссылки на таблицу стилей в свойangular index.html page

... / src / index.html 

    <head>
    <!-- Favicon -->
    <link rel="icon" type="image/png" sizes="192x192" href="assets/img/logo.png">
    <!-- Stylesheet -->
    <link rel="stylesheet" href="assets/sax/css/base/bootstrap.min.css">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    </head>

... / src / app / app.moudule.ts

Код в файле app.moudule.ts выглядит следующим образом: 

import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {
  MatIconModule,
  MatTabsModule
} from '@angular/material';


@Injectable()
export class Http {}

@NgModule({
    imports:     [
        BrowserAnimationsModule,
        MatIconModule,
        AgmCoreModule.forRoot({
            apiKey: 'xxx',
            libraries: ["places"]
        }),
      MatTabsModule,
      MatToolbarModule
    ],
    declarations: [ AppComponent, MainComponent],
    providers: [RoutingState, AppService {provide: Http, useValue: axios}],
    bootstrap:    [ AppComponent ]
})
export class AppModule { }

И, наконец, генерируется HTML-страница приложения.:

... / src / app / main / staff / initiation / initiation.component.html 

<section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">

  <mat-icon svgIcon="thumbs-up" aria-hidden="false" aria-label="Example thumbs up SVG icon"></mat-icon>

</section>

Ответы [ 2 ]

2 голосов
/ 19 сентября 2019

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

Чтобы он работал, вам нужно добавить строку между тегами mat-icon.Чтобы правильно отобразить значок thumb_up, попробуйте следующее. 

<mat-icon aria-hidden="false" aria-label="Example thumbs up SVG icon">thumb_up</mat-icon>

Найдите доступные значки здесь и замените текст thumb_up нужными значками.

1 голос
/ 19 сентября 2019

Я знаю, как заставить mat-icon работать, использовать его следующим образом: 

<mat-icon>alarm</mat-icon>

... это строковый идентификатор между тегами нужного изображения.Остальные настройки кажутся нормальными.

Надеюсь, это поможет.

Редактирование

По-видимому, вы можете зарегистрировать svgIcons в сервисе MatIconRegistry.Ваш пример, по-видимому, основан на этом подходе; 

constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    iconRegistry.addSvgIcon(
        'thumbs-up',
        sanitizer.bypassSecurityTrustResourceUrl('assets/img/examples/thumbup-icon.svg'));
  }

Код выше взят из примеров значков угловых материалов .Думаю, я все же предпочитаю использовать строковые литералы, как описано в моем первом ответе.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...