각질 재료에서의 사용 방법

각질 재료에서의 사용 방법

Material의 아이콘을 어떻게 사용하는지 궁금했습니다.왜냐하면 이 아이콘은 동작하지 않기 때문입니다.

<material-icon icon = "/img/icons/ic_access_time_24px.svg"> </material-icon> 

아이콘 속성에 파라미터로 지정된 경로에 문제가 있는 것 같습니다.이 아이콘 폴더가 실제로 어디에 있는지 알고 싶습니다.

다른 답변들은 저의 고민을 해결해 주지 못했기 때문에 저는 저만의 답변을 쓰기로 했습니다.

" " 의 입니다.md-icon디렉티브는 스태틱파일 디렉토리 내에 있는 .png 또는 .svg 파일의 URL 입니다.따라서 icon 속성에 해당 파일의 올바른 경로를 입력해야 합니다.p.s는 서버가 파일을 처리할 수 있도록 파일을 올바른 디렉토리에 저장합니다.

마세요.md-icon부트스트랩 아이콘과는 다릅니다.현재 이러한 명령어는 .svg 파일을 표시하는 명령어에 불과합니다.

갱신하다

이 질문이 올라온 이후 각진 소재 디자인이 많이 바뀌었습니다.

, 그럼 이번에는 이렇게 여러 요.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>

하려면 , 「 」에 가 있습니다.$mdIconProviderservice를 사용하여 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>

상세한 것에 대하여는, 다음의 Web 사이트를 참조해 주세요.

Angular Material mdIcon 지침 문서

$mdIcon 서비스 문서

$mdIconProvider 서비스 문서

현재 가장 간단한 방법은 Google 글꼴에서 재료 아이콘 글꼴을 요청하는 것입니다(예: HTML 헤더 태그).

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

또는 스타일시트:

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

md-icon 디렉티브에서 설명한 바와 같이 font 아이콘으로 사용합니다.예를 들어 다음과 같습니다.

<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는 아직 각질물질의 바우어 릴리즈에 있지 않습니다.폴리머 아이콘을 사용해 봤는데, 어차피 똑같을 거예요.

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> 

ngMdIcons를 angularjs 응용 프로그램에 주입합니다.

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

html에서 ng-md-icon 디렉티브를 사용하여 css에서 fill-color를 지정합니다.

<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:

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/ # / material / 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;
}

언급URL : https://stackoverflow.com/questions/26192501/how-to-use-md-icon-in-angular-material