Вы можете использовать свойство vector-effect
, установленное в non-scaling-stroke
, см. документы . Другой способ - использовать transform(ref)
.
Это будет работать в браузерах, которые поддерживают эти части из SVG Tiny 1.2, например Opera 10. Резервный включает в себя запись небольшого скрипта в сделайте то же самое, в основном инвертируя CTM и применяя его к элементам, которые не должны масштабироваться.
Если вы хотите более резкие линии, вы также можете отключить сглаживание (shape-rendering=optimizeSpeed
или shape-rendering=crispEdges
) и / или играть с позиционированием.
Чтобы использовать MdIcon
, вам необходимо включить соответствующие css
файлы. В вашем коде вы используете шрифт по умолчанию Material Icons
от Google.
По умолчанию используется шрифт значков материалов . (Вам все равно нужно будет включить 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
Стоит знать, что для использования разделенного символом пробела (например, для загрузки файла) нам нужно использовать подчеркивание _. Например:
<md-icon>file_upload</md-icon>
внутри style.css скопируйте и вставьте следующее: ---
@import "https://fonts.googleapis.com/icon?family=Material+Icons";
и используйте как:
<md-icon>menu</md-icon>
^--- icon name
Для работы в автономном / локальном режиме (предоставьте css с вашего сервера):
@import "~material-design-icons/iconfont/material-icons.css";
Просто добавьте следующую строку в index.html
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Также вам необходимо импортировать 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]
})