2017-12-27 34 views
1

전제 신청서를 작성 중입니다. 어디에서, 나는 material-components-web을 사용한다. 나는이사전 조치/대응 앱에 Google 소재 아이콘 사용

<i class="material-icons" aria-hidden="true">home</i> 

같은 아이콘을 렌더링하는 경우 이 잘 표시 홈 아이콘을 사용할 수 있습니다.

하지만 거기에 내가 변수로 home을 넣어하려는 어떤 이유로, 이런 식으로 뭔가 :

let homeIcon = 'home'; 
<i class="material-icons" aria-hidden="true">{homeIcon}</i> 

그렇게 할 수있는 방법이 있나요? 당신은 이러한 변형 중 하나를 사용하여 재료 아이콘을 사용할 수 있습니다

답변

1

감사 : <i class="material-icons">face</i><i class="material-icons">&#xE87C;</i>

은 나뿐만 home을 보여주는 합자로 변수 나던 전송이 대신이라고 생각합니다. const iconHome = <i class="material-icons" aria-hidden="true">home</i>;과 같은 것을 시도하거나 숫자 char 참조를 사용하십시오.

이 예제에서는 ligatures라고하는 활자체 기능을 사용합니다.이 기능을 사용하면 텍스트 이름을 사용하여 간단하게 아이콘 글자를 렌더링 할 수 있습니다. 대체는 웹 브라우저에서 자동으로 수행되며 동등한 숫자 문자 참조보다 읽기 쉬운 코드를 제공합니다. preact-material

참고 : 은 또한 당신은 preact을위한 재료 구성 요소를 통해 특별한 얇은 래퍼를 확인 할

+0

Material Icons이 좋은 해결 방법을 제공 주셔서 감사합니다. 나는 변수 대신 함수에'home'을 넣어서이 문제를 해결할 수있다. 다음과 같이 :''. 마지막으로 작동합니다. –