【IE 대응】Google Material Icons를 data 속성을 사용해 스마트하게 표시한다

Google Material Icons를 IE 대응하여 사용하는 방법?

방법 1: HTML로 직접 작성

<i class="material-icons">email</i>

가장 쉬운 방법이지만 문제가 하나 있습니다.
구글의 검색 결과에 표시되는 타이틀이나 메뉴 부분에 이 방법으로 아이콘을 설치해 버리면, emailお問い合わせフォーム 와 같은 형태로 아이콘의 코드가
텍스트로 함께 표시됩니다.

방법 2: CSS에서 이전 문자 코드를 사용하여 작성

Google Material Icons를 CSS로 표시할 수 있습니다.
공식 사이트 의 「email」등의 코드를 content 에 넣는 것으로 사용할 수 있습니다만, IE에서는
이전 문자 코드가 아니면 표시되지 않습니다. .

.material-icon::before {
   font-family: Material Icons, sans-serif;
   content: "\e0be"; //IE以外は「email」でOK
}

다만, 이 방법이라고 아이콘마다 CSS를 써야 하기 때문에 꽤 귀찮습니다.

HTML만으로 의사 요소로 표시

CSS로 표시할 수 있으면 아무것도 문제 없기 때문에, <i class="material-icons">email</i> 와 같이 HTML로 완결한 다음, 의사 요소로서 표시하는 방법을 정리했습니다.

기반 HTML 및 CSS 준비

.material-icon::before {
   font-family: Material Icons, sans-serif;
   content: attr(data-icon);
}

<i class="material-icon" data-icon="文字コード"></i>

data-icon 에 넣은 코드가 content: 에 있게 됩니다.
기본이 되었으므로 아이콘을 표시하기 위해 다음 단계를 따라 문자 코드를 준비합니다.

1. 사용할 아이콘을 선택합니다.

이번은 공식 사이트 에서 「email」을 선택합니다

2. 문자 코드 확인

"email"로 검색하여 "e0be"의 문자 코드를 얻습니다.
문자 코드 목록: GitHub

3. 10진수로 변환

data-icon="\e0be" 로 표시되고 싶은 곳입니다만, 이것이라고 표시되지 않습니다.
'\'를 '&#'로 한 후, e0be를 10진수로 하는 것으로 표시됩니다.

변환 도구

할 수 있었다

<i class="material-icon" data-icon="&#57534;"></i>お問い合わせ

이제 검색 결과의 텍스트 표시도 없고, 아이콘의 추가는 HTML만으로 할 수 있게 되었습니다. 문자 코드를 찾아서 변환하는 번거로움이 있지만 CSS에서 매번 설정하는 것보다 편해집니다.