Использование значков angular 2 материала

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

Вот как это должно работать, из демонстрации в github repo материала 2:

https://github.com/angular/material2/blob/master/src/demo-app/icon/icon-demo.ts

Я пытался использовать его, но значки не отображаются вообще.

Вот как я это настроил:

app.component.ts

import {MdIcon, MdIconRegistry} from '@angular2-material/icon/icon';

@Component({
  ...
  encapsulation: ViewEncapsulation.None,
  viewProviders: [MdIconRegistry],
  directives: [MdIcon],
})
export class MyComponent{
  constructor(private router: Router,
              private JwtService:JwtService,
              mdIconRegistry: MdIconRegistry){
    mdIconRegistry.addSvgIconSetInNamespace('core', 'fonts/core-icon-set.svg')
  }
}

и шаблон..

<md-icon>home</md-icon>

Страница загружается без ошибок, но значок не отображается. Что могло пойти не так?

Ответ 1

Чтобы использовать MdIcon, вам нужно включить соответствующие файлы css. В вашем коде используется шрифт по умолчанию Material Icons из Google.

Из angular -material2 repo:

По умолчанию используется Material icons font. (Вам все равно нужно включить HTML для загрузки шрифта и его CSS, как описано в ссылке).

Просто просто включите css в index.html следующим образом:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Или вы можете выбрать любой другой способ импорта, указанный в официальном репо:

http://google.github.io/material-design-icons/#icon-font-for-the-web

Ответ 2

Стоит знать, что для использования выделенного пространства значков (например, для загрузки файла) нам нужно использовать знак подчеркивания _. Например:

<md-icon>file_upload</md-icon>

Ответ 3

Начиная с @ngModule, начиная с Angular синтаксис RC5 будет следующим:

приложение-пример-module.ts

import { MdIconModule, MdIconRegistry } from '@angular2-material/icon';

@NgModule({
    imports: [
        MdIconModule
    ]
    providers: [
        MdIconRegistry
    ]
})

export class AppExampleModule {
    //
}

приложение-пример-component.ts

@Component({

    selector: 'app-header',
    template: `<md-icon svgIcon="close"></md-icon>`
})


export class AppExampleComponent
{
    constructor(private mdIconRegistry: MdIconRegistry) {
        mdIconRegistry
            .addSvgIcon('close', '/icons/navigation/ic_close_36px.svg');
    }
}

Ответ 4

внутри style.css скопируйте и вставьте следующее: ---

@import "https://fonts.googleapis.com/icon?family=Material+Icons";

и используйте как:

<md-icon>menu</md-icon>
          ^--- icon name

Ответ 5

В angular 4.3.3 с @ angular/материалом 2.0.0-beta-7 вам также необходимо очистить URL.

import { DomSanitizer } from '@angular/platform-browser';

export class AppComponent
{
    constructor(
        private domSanitizer: DomSanitizer,
        private mdIconRegistry: MdIconRegistry) {
        mdIconRegistry.addSvgIcon('twitter', domSanitizer.bypassSecurityTrustResourceUrl('/assets/icons/twitter.svg'));
    }
}

Ответ 6

Для работы в автономном/локальном режиме (предоставьте css с вашего сервера):

npm install material-design-icons --save
в src/styles.css добавьте @import "~material-design-icons/iconfont/material-icons.css";

Ответ 7

Так я и пытался, и он работает.

mdIconRegistry.addSvgIcon('slider', sanitizer.bypassSecurityTrustResourceUrl('./assets/controls/slider.svg'));

Экземпляр mdIconRegistry будет доступен через DI и добавит пользовательский svg, используя метод addSvgIcon. Затем используйте <md-icon svgIcon="slider"> в своем шаблоне.

Ответ 8

Просто добавьте следующую строку в index.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Ответ 9

Мы должны следовать шагам

https://www.npmjs.com/package/ng2-image-viewer

После выполнения этих шагов мы должны включить ссылку на значки материалов в index.html.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Для значков материалов добавьте код в файл style.css

.inline-icon > div > .tooltip:first-child {
    pointer-events: none;
  }

  .options-image-viewer > .tooltip {
    opacity: 1 !important;
    pointer-events: visible !important;
  }

  .inline-icon, .image-gallery-2 {
    background-color: #222B38 !important;
  }

Ничего себе, это работает нормально.............

Ответ 10

Также вам нужно импортировать Http.

import {HTTP_PROVIDERS} from '@angular/http';
import {MdIcon, MdIconRegistry} from  '@angular2-material/icon';
@Component({
    template:`<md-icon>code</md-icon>`
    directives:[MdIcon],
    providers: [HTTP_PROVIDERS, MdIconRegistry]
})