업데이트 (31/03/2019) : 모든 아이콘 테마는 이제 Google 웹 글꼴을 통해 작동합니다.
Edric이 지적했듯이 이제 문서 헤드에 Google 웹 글꼴 링크를 추가하면됩니다.
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">
그런 다음 올바른 테마를 추가하여 특정 테마의 아이콘을 출력하십시오.
<i class="material-icons">donut_small</i>
<i class="material-icons-outlined">donut_small</i>
<i class="material-icons-two-tone">donut_small</i>
<i class="material-icons-round">donut_small</i>
<i class="material-icons-sharp">donut_small</i>
CSS를 사용하여 아이콘의 색상을 변경할 수 있습니다.
참고 : 투톤 테마 아이콘은 현재 약간 고장입니다.
업데이트 (14/11/2018) : "_outline"접미사와 함께 작동하는 16 개의 개요 아이콘 목록.
_outline 접미사 (테스트 및 확인)를 사용하여 일반 Material-icons Webfont와 함께 작동하는 16 가지 개요 아이콘의 최신 목록은 다음과 같습니다 .
( material-design-icons github 페이지 에서 찾을 수 있습니다 . " _outline_24px.svg " 검색 )
<i class="material-icons">help_outline</i>
<i class="material-icons">label_outline</i>
<i class="material-icons">mail_outline</i>
<i class="material-icons">info_outline</i>
<i class="material-icons">lock_outline</i>
<i class="material-icons">lightbulb_outline</i>
<i class="material-icons">play_circle_outline</i>
<i class="material-icons">error_outline</i>
<i class="material-icons">add_circle_outline</i>
<i class="material-icons">people_outline</i>
<i class="material-icons">person_outline</i>
<i class="material-icons">pause_circle_outline</i>
<i class="material-icons">chat_bubble_outline</i>
<i class="material-icons">remove_circle_outline</i>
<i class="material-icons">check_box_outline_blank</i>
<i class="material-icons">pie_chart_outlined</i>
참고 것을 pie_chart의 요구로 " pie_chart_는 설명 '이 아니라 개요 .
이것은 인라인 태그를 사용하여 새로운 아이콘 테마를 테스트하는 해킹입니다. 공식 솔루션이 아닙니다.
오늘 (2018 년 7 월 19 일) 현재, 새로운 아이콘 테마가 도입 된 지 2 개월이 조금 넘었 지만 인라인 태그를 사용하여 이러한 아이콘을 포함시킬 방법이 없습니다<i class="material-icons"></i> .
+ Martin 은 Github에서 https://github.com/google/material-design-icons/issues/773 에 대해 제기 된 문제가 있다고 지적했습니다.
따라서 Google이 이에 대한 해결책을 제시 할 때까지 해킹을 사용하여 SVG 또는 PNG와 같은 적절한 아이콘을 다운로드하기 전에 개발 환경 에 이러한 새로운 아이콘 테마를 포함시키기 시작했습니다 . 그리고 나는 당신과 그것을 공유 할 것이라고 생각했습니다.
중요 : Google에 포함 된 각 CSS 파일의 크기가 1MB를 초과하므로 프로덕션 환경에서는 이것을 사용하지 마십시오.
Google은 다음 스타일 시트를 사용하여 데모 페이지에 아이콘을 보여줍니다.
개요:
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">
반올림 :
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/round.css">
두 톤:
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/twotone.css">
날카로운:
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css">
이러한 각 파일에는 배경 이미지 (Base64 이미지 데이터)로 포함 된 각 테마의 아이콘이 포함되어 있습니다. 다음은 프로덕션 환경에서 사용하기 위해 디자인에서 특정 아이콘의 호환성을 테스트하기 위해이 기능을 사용하여 디자인하는 방법입니다.
1 단계 :
사용하려는 테마의 스타일 시트를 포함하십시오. 예 : 'Outlined'테마의 경우 'outline.css'에 스타일 시트를 사용하십시오.
2 단계 :
자신의 스타일 시트에 다음 클래스를 추가하십시오 .
.material-icons-new {
display: inline-block;
width: 24px;
height: 24px;
background-repeat: no-repeat;
background-size: contain;
}
.icon-white {
webkit-filter: contrast(4) invert(1);
-moz-filter: contrast(4) invert(1);
-o-filter: contrast(4) invert(1);
-ms-filter: contrast(4) invert(1);
filter: contrast(4) invert(1);
}
3 단계 :
태그에 다음 클래스 를 추가하여 아이콘을 사용하십시오 <i>.
1) material-icons-new수업
2) 머티리얼 아이콘 데모 페이지에 표시된 바와 같이 테마 이름이 앞에 붙은 하이픈이있는 아이콘 이름.
접두사 :
개설 : outline-
반올림 : round-
두 톤: twotone-
날카로운: sharp-
예 ( '알림'아이콘의 경우) :
outline-announcement, round-announcement, twotone-announcement,sharp-announcement
3) 선택적인 3 급 icon-white을 사용 하여 색상을 검은 색에서 흰색으로 반전시킵니다 (어두운 배경의 경우)
아이콘 크기 변경 :
글꼴 이미지가 아닌 배경 이미지 이므로 CSS 의 height및 width속성을 사용 하여 아이콘 크기를 수정하십시오. material-icons-new클래스 에서 기본값은 24px로 설정되어 있습니다.
예:
사례 I : account_circle 아이콘 의 개요 테마 :
1) 스타일 시트를 포함하십시오 :
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">
2) 페이지에 아이콘 태그를 추가하십시오.
<i class="material-icons-new outline-account_circle"></i>
선택 사항 (어두운 배경의 경우) :
<i class="material-icons-new outline-account_circle icon-white"></i>
사례 II : 평가 아이콘 의 날카로운 주제 :
1) 스타일 시트를 포함하십시오 :
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css">
2) 페이지에 아이콘 태그를 추가하십시오.
<i class="material-icons-new sharp-assessment"></i>
(어두운 배경의 경우) :
<i class="material-icons-new sharp-assessment icon-white"></i>
프로덕션 환경에 아이콘을 포함시키는 것이 옳지 않은 방법이라고 충분히 강조 할 수는 없습니다. 그러나 개발중인 페이지에서 여러 아이콘을 스캔해야하는 경우 아이콘을 쉽게 포함시키고 시간을 많이 절약 할 수 있습니다.
사이트 속도 최적화의 경우 아이콘을 SVG 또는 PNG로 다운로드하는 것이 더 좋은 옵션이지만 글꼴 아이콘은 프로토 타이핑 단계에서 특정 아이콘이 디자인 등에 적용되는지 확인하는 데 시간을 절약 해줍니다.
사용 아이콘을 다운로드하지 않는이 문제에 대한 해결책을 Google에 제시하면이 게시물을 업데이트 할 것입니다.
