React에서 FontIcon Material-UI 구성 요소에 Material UI 아이콘 추가

Question

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

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

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

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

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

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

Answer 1

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

<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> 태그를 가지고 있기 때문에이 />없이해야한다라고 생각합니다.