Angular Material에서 <md-icon>을 사용하는 방법은 무엇입니까?

이것이 작동하지 않기 때문에 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>

이것을 사용하려면 $mdIconProvidersvg 아이콘 세트로 애플리케이션을 구성 하는 서비스가 필요합니다.

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>

자세한 내용은

Angular Material mdIcon 지시어 문서

$ mdIcon 서비스 문서

$ mdIconProvider 서비스 문서

오늘날 가장 간단한 방법은 예를 들어 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> 

출처 : https://klarsys.github.io/angular-material-icons/

최신 릴리스에는 다음과 같은 지시문이 있습니다. 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>

다음은 최신 문서입니다.

https://material.angular.io/components/icon/overview

<md-button class="md-fab md-primary" md-theme="cyan" aria-label="Profile">
    <md-icon icon="/img/icons/ic_people_24px.svg" style="width: 24px; height: 24px;"></md-icon>
</md-button>

출처 : https://material.angularjs.org/#/demo/material.components.button

같은 위치에 CSS와 글꼴 을 사용하여

@font-face {
    font-family: 'Material-Design-Icons';
    src: url('Material-Design-Icons.eot');
    src: url('Material-Design-Icons.eot?#iefix') format('embedded-opentype'),
         url('Material-Design-Icons.woff2') format('woff2'),
         url('Material-Design-Icons.woff') format('woff'),
         url('Material-Design-Icons.ttf') format('truetype'),
         url('Material-Design-Icons.svg#ge_dinar_oneregular') format('svg');
    font-weight: normal;
    font-style: normal;
}