2017-12-31 22 views
1

React에 Material-UI FontIcon 구성 요소가있는 Material-UI 아이콘을 표시하려고합니다. 내 코드는 :React에서 FontIcon Material-UI 구성 요소에 Material UI 아이콘 추가

<FontIcon className="material-icons"/> 
    Help 
</FontIcon> 

만 텍스트가 화면에 표시됩니다.

아이콘은 https://material.io/icons/의 도움말 아이콘입니다. 아이콘 라이브러리가 설치되었습니다. 아이콘 글꼴이 합자를 지원하는 경우 http://www.material-ui.com/#/components/font-icon에 따르면 우리는

className에서 글꼴을 참조해야하고 FontIcon 태그의 아이콘 이름을 묶습니다. 라이브러리를 설치했지만 왜 작동하지 않는지 잘 모르겠습니다.

이것을 구현하는 올바른 방법은 무엇입니까?

+0

''material-ui/FontIcon''에서'FontIcon'을 가져 왔습니까? –

+0

@ 존 케네디 예. 내 구문이 정확합니까? – Ben

+0

내 대답보기. –

답변

2

제공된 링크의 예에서 공용 글꼴을 코드에서 참조해야한다고 나와 있습니다.

<FontIcon className="material-icons" style={iconStyles}>home</FontIcon> 

당신은 NPM을 사용하여 아이콘을 다운로드 결정할 수 :

npm install material-design-icons 

또는 더 나은 아직이 기본 HTML 파일의 head 섹션에 아래의 코드를 추가합니다.

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

, 그것은해야한다 :

<FontIcon className="material-icons">help</FontIcon> 

참고 나는 소문자 help을 사용하지 Help 아이콘 이름.

나는 자기 폐쇄 <FontIcon className="material-icons" /> 오타, 그것을 닫는 </FontIcon> 태그를 가지고 있기 때문에이 />없이해야한다라고 생각합니다.

+0

감사합니다. 그러나 NPM ("npm install material-design-icons")에서 라이브러리를 이미 설치했습니다. 나는 "Help"를 "Help"로 바 꾸었습니다. 이제 "Help"를 대신 인쇄했습니다. – Ben

+0

가져 왔습니까? 대신'link' 버전을 사용하시기 바랍니다. –

+0

링크 태그를 html에 추가하면 아이콘이 렌더링되었습니다. 실패했거나 충분하지 않은 것으로 보입니다. – Ben

관련 문제