이것이 작동하지 않기 때문에 Material의 아이콘을 사용하는 방법을 궁금합니다.
<material-icon icon = "/img/icons/ic_access_time_24px.svg"> </material-icon>
아이콘 속성에 매개 변수로 지정된 경로에 문제가있는 것 같습니다. 이 아이콘 폴더가 실제로 어디에 있는지 알고 싶습니다.
답변
다른 답변은 내 우려를 해결하지 않았기 때문에 내 답변을 작성하기로 결정했습니다.
md-icon
지시문 의 아이콘 속성에 지정된 경로 는 정적 파일 디렉토리에있는 .png 또는 .svg 파일의 URL입니다. 따라서 아이콘 속성에 해당 파일의 올바른 경로를 입력해야합니다. ps는 서버가 파일을 제공 할 수 있도록 올바른 디렉토리에 파일을 저장합니다.
기억 md-icon
부트 스트랩 아이콘처럼되지 않습니다. 현재는 .svg 파일을 표시하는 지시문 일뿐입니다.
최신 정보
이 질문이 게시 된 이후 Angular 머티리얼 디자인은 많이 변경되었습니다.
이제 여러 가지 사용 방법이 있습니다. md-icon
첫 번째 방법은 SVG 아이콘을 사용하는 것입니다.
<md-icon md-svg-src = '<url_of_an_image_file>'></md-icon>
예:
<md-icon md-svg-src = '/static/img/android.svg'></md-icon>
또는
<md-icon md-svg-src = '{{ getMyIcon() }}'></md-icon>
어디에서이 getMyIcon
방법은로 정의된다 $scope
.
또는
<md-icon md-svg-icon="social:android"></md-icon>
이것을 사용하려면 $mdIconProvider
svg 아이콘 세트로 애플리케이션을 구성 하는 서비스가 필요합니다.
angular.module('appSvgIconSets', ['ngMaterial'])
.controller('DemoCtrl', function($scope) {})
.config(function($mdIconProvider) {
$mdIconProvider
.iconSet('social', 'img/icons/sets/social-icons.svg', 24)
.defaultIconSet('img/icons/sets/core-icons.svg', 24);
});
두 번째 방법은 글꼴 아이콘을 사용하는 것입니다.
<md-icon md-font-icon="android" alt="android"></md-icon>
<md-icon md-font-icon="fa-magic" class="fa" alt="magic wand"></md-icon>
이 작업을 수행하기 전에 이와 같은 글꼴 라이브러리를로드해야합니다.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
또는 합자가있는 글꼴 아이콘 사용
<md-icon md-font-library="material-icons">face</md-icon>
<md-icon md-font-library="material-icons">#xE87C;</md-icon>
<md-icon md-font-library="material-icons" class="md-light md-48">face</md-icon>
자세한 내용은
답변
오늘날 가장 간단한 방법은 예를 들어 HTML 헤더 태그에서 Google Fonts에서 Material Icons 글꼴을 요청하는 것입니다.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
또는 스타일 시트에서 :
@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
그런 다음 md-icon 지시문에 설명 된대로 합자가있는 글꼴 아이콘으로 사용 합니다 . 예를 들면 :
<md-icon aria-label="Menu" class="material-icons">menu</md-icon>
전체 아이콘 / 연자 목록은 https://www.google.com/design/icons/에 있습니다.
답변
실제로 정자에서 작동합니다.
bower install material-design-icons --save
37.1KB를 다운로드합니다. 그런 다음 추출하고 설치합니다. bower_components 폴더에 material-design-icons라는 폴더가 표시됩니다. 총 크기는 약 299KB입니다.
답변
md-icons는 아직 앵귤러 머티리얼의 보어 릴리스에 없습니다. 나는 Polymer의 아이콘을 사용하고 있었는데 , 그것들은 어쨌든 동일 할 것입니다.
bower install polymer/core-icons
답변
쉬운 방법 : 다음 CDN을 사용하십시오.
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-material-icons/0.5.0/angular-material-icons.min.js"></script>
angularjs 애플리케이션에 ngMdIcons를 삽입합니다.
angular.module('demoapp', ['ngMdIcons']);
CSS를 통해 채우기 색상을 지정하여 html에서 ng-md-icon 지시문을 사용하십시오.
<ng-md-icon icon="..." style="fill: ..." size="..."></ng-md-icon>
답변
최신 릴리스에는 다음과 같은 지시문이 있습니다. md-icon
<md-icon icon="img/icons/ic_refresh_24px.svg"></md-icon>
답변
모든 md-
접두사는 mat-
이 글을 쓰는 시점에서 접두사입니다!
이것을 HTML 헤드에 넣으십시오.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
모듈에서 가져 오기 :
import { MatIconModule } from '@angular/material';
코드에서 사용 :
<mat-icon>face</mat-icon>
다음은 최신 문서입니다.