[angularjs] Angular Material에서 <md-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 서비스 문서

답변

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

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

<md-icon aria-label="Menu" class="material-icons">menu</md-icon>

bower install material-design-icons --save

bower install polymer/core-icons

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-material-icons/0.5.0/angular-material-icons.min.js"></script> 

angular.module('demoapp', ['ngMdIcons']);

<ng-md-icon icon="..." style="fill: ..." size="..."></ng-md-icon> 

<md-icon icon="img/icons/ic_refresh_24px.svg"></md-icon>

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

import { MatIconModule } from '@angular/material';

<mat-icon>face</mat-icon>