Использование угловых 2 иконок материалов

Вы можете использовать свойство vector-effect, установленное в non-scaling-stroke, см. документы . Другой способ - использовать transform(ref) .

Это будет работать в браузерах, которые поддерживают эти части из SVG Tiny 1.2, например Opera 10. Резервный включает в себя запись небольшого скрипта в сделайте то же самое, в основном инвертируя CTM и применяя его к элементам, которые не должны масштабироваться.

Если вы хотите более резкие линии, вы также можете отключить сглаживание (shape-rendering=optimizeSpeed или shape-rendering=crispEdges) и / или играть с позиционированием.

21
задан Sonicd300 31 October 2017 в 20:54
поделиться

6 ответов

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

Из angular-material2 repo :

По умолчанию используется шрифт значков материалов . (Вам все равно нужно будет включить 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

31
ответ дан Abdulrahman 31 October 2017 в 20:54
поделиться

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

<md-icon>file_upload</md-icon>
16
ответ дан Tim Gautier 31 October 2017 в 20:54
поделиться

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

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

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

<md-icon>menu</md-icon>
          ^--- icon name
11
ответ дан isherwood 31 October 2017 в 20:54
поделиться

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

  1. npm install material-design-icons --save
  2. в src / styles.css add @import "~material-design-icons/iconfont/material-icons.css";
2
ответ дан Valentin Bossi 31 October 2017 в 20:54
поделиться

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

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
0
ответ дан jps 31 October 2017 в 20:54
поделиться

Также вам необходимо импортировать 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]
})
-4
ответ дан Edric 31 October 2017 в 20:54
поделиться
Другие вопросы по тегам:

Похожие вопросы: