2016-11-04 3 views
0

각도 재료 응용 프로그램에 하나의 아이콘을 추가하려고합니다. 문서에서 나의 이해에 따라 나는 다음과 같은 $mdIconProvider을 사용하고 있습니다 :각도 재료 응용 프로그램에 svg 아이콘을로드하는 방법

app.config(function($stateProvider, $urlRouterProvider, $mdIconProvider) { 
    $urlRouterProvider.otherwise('/login'); 
    $stateProvider 
     .state('login', { 
      url: '/login', 
      views: { 
       '@': { 
        controller: 'LoginCtrl', 
        templateUrl: 'app/components/login/login.html' 
       } 
      } 
     }); 
    $mdIconProvider 
     .iconSet('account', 'resources/icons/ic_account_circle_48px.svg', 48); 
}); 

내가 내 $templateCacheng-templates 꿀꿀 모듈을 사용하여이 아이콘을로드 한. 아래

그리고 내 템플릿 코드 :

<md-button aria-label="Open phone interactions menu" class="md-icon-button"> 
        <md-icon md-menu-origin md-svg-icon="account"></md-icon> 
</md-button> 

아이콘 표시를 얻고 브라우저 콘솔에서 경고의 아래에 점점되지 않습니다. 내가 각도 및 각 재료의 디자인에 새로운 오전으로

enter image description here

친절 올바른 방법으로 저를 안내합니다.

답변

1

의를 확인을 찾을 수 있습니다 목록 here

<md-list-item class="md-3-line"> 
       <md-icon md-svg-icon="ic_place_48px.svg"></md-icon> 
       <div class="md-list-item-text"> 
       <h3>blueberries</h3> 
       <p>content1</p> 
       <p>content2</p> 
       </div> 
</md-list-item> 

DEMO

+0

이 방법 이미지를로드 할 수 있지만 $ mdIconProvider가 아이콘 아이콘을 사용하여 아이콘 아이콘에있는 아이콘을 등록하는 방법을 알고 싶고 그 이름을로드 할 때 l –

+0

@SuryaPrakashTumma이 샘플을 확인하십시오. https://plnkr.co/edit/lzpb1aid1pAndj0jnAZL? p = preview – Sajeetharan

+0

형제 님, 고마워요 .. 이제 나는 선명도를 얻었습니다. –

1

md-icon 안에 md-svg-src을 입력해야합니다.

<md-button aria-label="Open phone interactions menu" class="md-icon-button">     
    <md-icon md-menu-origin md-svg-src="resources/icons/ic_account_circle_48px.svg"></md-icon> 
</md-button> 
1

경우에만 하나의 svg 아이콘 파일이 아마도 당신이 그것을 사용하는 것을 고려할 수 있습니다. 당신이 글꼴 아이콘 대신 SVG 파일을 사용하여 시작하는 경우

<md-icon md-svg-src="resources/icons/ic_account_circle_48px.svg" aria-label="Account"></md-icon> 

그냥 제안, 당신은 그것을 쉬운 방법 :

이 자료 아이콘에 '계정'라는 이름의 아이콘이 없습니다
관련 문제