material icons

재료 아이콘

자체 호스팅 머티리얼 디자인 아이콘을 위한 최신 아이콘 글꼴 및 CSS입니다.

이 패키지는 자동으로 업데이트되므로 항상 Google의 최신 아이콘을 갖게 됩니다.

재료 기호에 대해서는 material-symbols 참조하십시오.

SVG의 경우 @material-design-icons/svg 참조하세요.

• 설치
• 용법
• 사용 가능한 아이콘

설치

다음을 사용하여 최신 버전을 설치하십시오.

npm install material-icons@latest

참고: 0.x에서 1.x로 업그레이드하는 경우 1.0.0 릴리스 노트를 참조하세요.

용법

JS에서 가져오기(예: Create React App의 src/index.js , Vue CLI의 src/main.js ):

 import 'material-icons/iconfont/material-icons.css' ;

또는 CSS에서 가져오기(예: Angular CLI의 src/styles.css ):

 @import 'material-icons/iconfont/material-icons.css' ;

또는 HTML로 가져오기:

 < link href =" /path/to/material-icons/iconfont/material-icons.css " rel =" stylesheet " >

아이콘을 표시하려면 다음 중 하나를 사용하십시오.

 < span class =" material-icons " > pie_chart </ span >          <!-- Filled -->
< span class =" material-icons-outlined " > pie_chart </ span > <!-- Outlined -->
< span class =" material-icons-round " > pie_chart </ span >    <!-- Round -->
< span class =" material-icons-sharp " > pie_chart </ span >    <!-- Sharp -->
< span class =" material-icons-two-tone " > pie_chart </ span > <!-- Two Tone -->

빌드 크기 줄이기

기본 material-icons.css 에는 모든 글꼴에 대한 CSS가 포함되어 있습니다. 이로 인해 webpack과 같은 빌드 도구가 모든 글꼴을 사용하지 않더라도 모든 글꼴을 빌드 디렉토리에 복사할 수 있습니다. 빌드 크기를 줄이려면 필요한 스타일만 가져오세요. 예를 들어, 채워진 아이콘과 윤곽선이 있는 아이콘만 필요한 경우 기본 material-icons.css 대신에 filled.css 및 outlined.css 가져옵니다.

 - import 'material-icons/iconfont/material-icons.css';
+ import 'material-icons/iconfont/filled.css';
+ import 'material-icons/iconfont/outlined.css';

모두 표시

아이콘	CSS	사스
채우는	채워진.css	채워진.scss
개요	윤곽선.css	설명.scss
둥근	라운드.css	라운드.scss
날카로운	샤프.css	샤프.scss
투톤	투톤.css	투톤.scss

Sass 사용

Sass에서 가져오기(예: Angular CLI의 src/styles.scss ):

 @import ' material-icons/iconfont/material-icons.scss ' ;

사용 가능한 Sass 변수:

 $material-icons-font-path : ' ./ ' !default ;
$material-icons-font-size : 24 px !default ;
$material-icons-font-display : block !default ;

webpack 또는 Vue CLI에서 오류가 발생하는 경우 가져오기 전에 다음 줄을 추가하세요.

 $material-icons-font-path : ' ~material-icons/iconfont/ ' ;

Angular mat-icon 사용

아이콘을 표시하려면 다음 중 하나를 사용하십시오.

 < mat-icon > pie_chart </ mat-icon >
< mat-icon fontSet =" material-icons-outlined " > pie_chart </ mat-icon >
< mat-icon fontSet =" material-icons-round " > pie_chart </ mat-icon >
< mat-icon fontSet =" material-icons-sharp " > pie_chart </ mat-icon >
< mat-icon fontSet =" material-icons-two-tone " > pie_chart </ mat-icon >

CSS 클래스 사용

또는 합자 대신 CSS 클래스를 사용하여 아이콘을 표시할 수도 있습니다. 자세히 알아보기

사용 가능한 아이콘

데모를 참조하세요.

특허

머티리얼 디자인 아이콘은 Google에서 만듭니다.

당사는 귀하가 Apache 라이센스 버전 2.0에 따라 귀하의 제품에 통합할 수 있도록 이러한 아이콘을 제공했습니다. 귀하의 제품에 이러한 아이콘과 문서를 자유롭게 리믹스하고 다시 공유할 수 있습니다. 우리는 앱의 정보 화면에 속성을 표시하는 것을 좋아하지만 필수는 아닙니다.