머티리얼 아이콘을 오프라인으로 호스팅하는 방법은 무엇입니까?

이것이 매우 간단한 질문이라면 사과드립니다. 그러나 Google 머티리얼 아이콘을 어떻게 사용합니까?

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 

?

사용자가 인터넷에 연결되어 있지 않아도 내 앱에서 아이콘을 표시 할 수 있기를 바랍니다.

방법 2. 자체 호스팅 개발자 가이드

github (assets : zip 파일)에서 최신 릴리스를 다운로드 하고, 머티리얼 디자인 아이콘 파일이 포함 된 iconfont 폴더의 압축을 풀고 로컬 프로젝트 ( https://github.com/google/material-design-icons/)에 복사합니다. 릴리스

아카이브 의 iconfont 폴더 만 사용하면 됩니다 . 여기에는 여러 형식의 아이콘 글꼴 (다중 브라우저 지원용)과 상용구 CSS가 포함되어 있습니다.

• @ font-face의 url 속성에있는 소스를 로컬 프로젝트 (글꼴 파일이있는 위치)의 iconfont 폴더에 대한 상대 경로로 대체하십시오. url ( "iconfont / MaterialIcons-Regular.ttf")

@font-face {
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
   src: url(iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
   src: local('Material Icons'),
        local('MaterialIcons-Regular'),
        url(iconfont/MaterialIcons-Regular.woff2) format('woff2'),
        url(iconfont/MaterialIcons-Regular.woff) format('woff'),
        url(iconfont/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

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

NPM / Bower 패키지

Google에는 공식적으로 Bower 및 NPM 종속성 옵션이 있습니다-Material Icons Guide를 따르십시오 1

정자 사용 :bower install material-design-icons --save

NPM 사용 :npm install material-design-icons --save

재질 아이콘 : 또는 @marella의 https://marella.me/material-icons/ 에서 아이콘을 자체 호스팅하기위한 재질 디자인 아이콘 글꼴 및 CSS 프레임 워크를 살펴 봅니다.

노트

Google에 낮은 유지 관리 모드에 대한 프로젝트가있는 것 같습니다. 마지막 릴리스는 작성 시점에서 3 년 전이었습니다!

이와 관련하여 GitHub에 몇 가지 문제가 있지만 Is this project actively maintained? #951머티리얼 아이콘을 분기하고 계속 유지하는 여러 커뮤니티 프로젝트를 참조 하는 문제에 대한 @cyberalien 의견을 참조하고 싶습니다 .

저는 Angular 4/5를 위해 구축하고 있으며 종종 오프라인으로 작업하므로 다음이 저에게 효과적이었습니다. 먼저 NPM을 설치합니다.

npm install material-design-icons --save

그런 다음 styles.css에 다음을 추가하십시오.

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

위의 접근 방식은 저에게 효과가 없습니다. github에서 파일을 다운로드했지만 브라우저가 글꼴을로드하지 않았습니다.

내가 한 것은 머티리얼 아이콘 소스 링크를 여는 것입니다.

https://fonts.googleapis.com/icon?family=Material+Icons

이 마크 업을 보았습니다.

    /* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}

woff 글꼴 URL 링크 https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2를 엽니 다.

woff2 파일을 다운로드합니다.

그런 다음 woff2 파일 경로를 material-icons.css의 새 경로로 바꿉니다.

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       /* Old file: url(iconfont/MaterialIcons-Regular.woff2) format('woff2'), */
       /* load new file */ 
       url(2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'),
       url(iconfont/MaterialIcons-Regular.ttf) format('truetype');
}

그것은 나를 위해 일하게 만듭니다.

웹팩 프로젝트를 사용하는 경우

npm install material-design-icons --save

당신은 단지 필요합니다

import materialIcons from 'material-design-icons/iconfont/material-icons.css'

이것은 쉬운 해결책이 될 수 있습니다

Google이 게시 한 원래 저장소 의 포크 인 이 저장소 를 가져옵니다 .

bower 또는 npm으로 설치

bower install material-design-icons-iconfont --save

npm install material-design-icons-iconfont --save

HTML 페이지에서 CSS 파일 가져 오기

<style>
  @import url('node_modules/material-design-icons-iconfont/dist/material-design-icons.css');
</style>

또는

<link rel="stylesheet" href="node_modules/material-design-icons-iconfont/dist/material-design-icons.css">

테스트 : HTML 파일의 body 태그 안에 아이콘 추가

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

얼굴 아이콘이 보이면 괜찮습니다.

작동하지 않으면 다음 ..을 node_modules경로에 접두사로 추가하십시오 .

<link rel="stylesheet" href="../node_modules/material-design-icons-iconfont/dist/material-design-icons.css">

내 레시피에는 세 단계가 있습니다.

1. material-design-icons 패키지를 설치하려면

   npm install material-design-icons

2. material-icons.css 파일을 .less 또는 .scss 파일 / 프로젝트로 가져 오기

   @import "~/node_modules/material-design-icons/iconfont/material-icons.css";

3. reactjs .js 파일 / 프로젝트에 권장 코드 포함

   <i className='material-icons' style={{fontSize: '36px'}}>close</i>

사용 재료 디자인 아이콘 - iconfont을

전체 공개,이 패키지의 작성자입니다.

구글의 재료 디자인 아이콘 프로젝트는 낮은 유지 보수에 와 잠시 동안 구식 . https://material.io/icons/ 의 버전과 material-design-icons 의 버전 사이에 차이가 있습니다 .

다음과 같은 주요 문제를 해결하기 위해 material-design-icons-iconfont 를 만들었습니다 .

• 재료 디자인 아이콘 잼 npm install- 모든 관련이없는 SVG / XML은 / ... 파일이 제거 된
• 글꼴 파일은 항상 Google FontsCDN 에서 바로 최신 상태입니다.
• scss 지원

다음을 통해 설치 npm

npm install material-design-icons-iconfont --save

웹 응용 프로그램을 포장하는 방법 ( webpack/ gulp/ bower/ ...) 에 따라 다르며 .css/ .scss파일 을 가져와야 합니다 (상대 글꼴 경로를 변경할 수 있음).

SCSS를 사용하여 가져 오기

sass 파일 중 하나에서 가져 오기

$material-design-icons-font-path: '~material-design-icons-iconfont/dist/fonts/';
@import '~material-design-icons-iconfont/src/material-design-icons';

나중에 원하는 아이콘 <i class="material-icons">+ icon-id +</i>

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

• 더 많은 가져 오기 방법을 보려면 material-design-icons-iconfont에 대한 전체 지침을 읽으십시오.

데모 페이지

글꼴 검색 및 복사 붙여 넣기를 지원 하는 간단한 데모 페이지 가 함께 제공됩니다.

내 대답에 셀프 호스팅 아이콘에 필요한 모든 것을 컴파일하려고했습니다. 이 4 가지 간단한 단계를 따라야합니다.

1. materialize 저장소의 iconfont 폴더를 엽니 다.

   링크 - https://github.com/google/material-design-icons/tree/master/iconfont

2. 이 세 아이콘 파일 다운로드->

   MaterialIcons-Regular.woff2- 형식 ( 'woff2')

   MaterialIcons-Regular.woff- 형식 ( 'woff')

   MaterialIcons-Regular.ttf -format ( 'truetype');

   참고-다운로드 후 원하는 이름으로 이름을 바꿀 수 있습니다.

3. 이제 CSS 로 이동 하여이 코드를 추가합니다.

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(MaterialIcons-Regular.woff2) format('woff2'),
       url(MaterialIcons-Regular.woff) format('woff'),
       url(MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

참고 : src : url (...)에 제공된 주소는 index.html 파일이 아닌 'CSS 파일'에 대한 것이어야합니다. 예를 들어 src가 될 수 있습니다. url (../ myicons / MaterialIcons-Regular.woff2)

4. 이제 사용할 준비가되었으며 HTML로 수행 할 수있는 방법은 다음과 같습니다.

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

사용할 수있는 모든 아이콘을 보려면 여기 를 클릭 하십시오 .

완료 한 후 npm install material-design-icons기본 CSS 파일에 다음을 추가하십시오.

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(~/material-design-icons/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(~material-design-icons/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
       url(~material-design-icons/iconfont/MaterialIcons-Regular.woff) format('woff'),
       url(~material-design-icons/iconfont/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

각도 CLI

npm install angular-material-icons --save

또는

npm install material-design-icons-iconfont --save

material-design-icons-iconfont는 아이콘의 최신 업데이트 버전입니다. angular-material-icons가 오랫동안 업데이트되지 않았습니다.

설치가 완료 될 때까지 기다린 다음 angular.json-> 프로젝트-> 아키텍트-> 스타일에 추가하십시오.

 "styles": [
          "node_modules/material-design-icons/iconfont/material-icons.css",
          "src/styles.scss"
        ],

또는 material-desing-icons-iconfont를 설치했다면

"styles": [
              "node_modules/material-design-icons-iconfont/dist/material-design-icons.css",
              "src/styles.scss"
            ],

2019 업데이트 :

머티리얼 아이콘, 일반 아이콘, 둥근 모양, 샤프, 모든 변형을 자체 호스팅합니다. 이 저장소에서 가져 오십시오 : https://github.com/petergng/material-icon-font

어떤 이유로 이러한 글꼴이 Google 저장소에서 쉽게 액세스 할 수 없는지 모르겠습니다.

하지만 여기 있습니다.

패키지를 다운로드 한 후 bin 폴더로 이동하면 네 가지 변형이 표시됩니다. 물론 어느 쪽이든 사용하는 것은 귀하에게 달려 있습니다.

이를 사용하려면 css 파일을 만들고

1. 필요한 각 변형에 대한 글꼴을 생성합니다.

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(./icons/regular/Material-Icons-Regular.eot); /* For IE6-8 */
    src: local('Material-Icons-Regular'),
    url(./icons/regular/Material-Icons-Regular.woff2) format('woff2'),
    url(./icons/regular/Material-Icons-Regular.woff) format('woff'),
    url(./icons/regular/Material-Icons-Regular.ttf) format('truetype');
}

@font-face {
    font-family: 'Material Icons Round';
    font-style: normal;
    font-weight: 400;
    src: url(./icons/round/Material-Icons-Round.eot); /* For IE6-8 */
    src: local('Material-Icons-Round'),
    url(./icons/round/Material-Icons-Round.woff2) format('woff2'),
    url(./icons/round/Material-Icons-Round.woff) format('woff'),
    url(./icons/round/Material-Icons-Round.svg) format('svg'),
    url(./icons/round/Material-Icons-Round.ttf) format('truetype');
}

@font-face {
    font-family: 'Material Icons Sharp';
    font-style: normal;
    font-weight: 400;
    src: url(./icons/sharp/Material-Icons-Sharp.eot); /* For IE6-8 */
    src: local('Material-Icons-Sharp'),
    url(./icons/sharp/Material-Icons-Sharp.woff2) format('woff2'),
    url(./icons/sharp/Material-Icons-Sharp.woff) format('woff'),
    url(./icons/sharp/Material-Icons-Sharp.svg) format('svg'),
    url(./icons/sharp/Material-Icons-Sharp.ttf) format('truetype');
}

는 url아이콘이 프로젝트에있는 곳으로 연결됩니다.

2. 이제 아이콘 클래스를 등록합니다.

.material-icons-outlined, .material-icons {
    font-weight: normal;
    font-style: normal;
    font-size: 24px;  /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
}

이 것 모두 .material-icons-outlined, 와 .material-icons클래스는 같은 기본값을 사용합니다. 를 사용 .material-icons-sharp하려면 두 클래스 이름에 추가하면됩니다.

3. 마지막으로 1 단계에서 가져온 글꼴을 플러그인하겠습니다.

.material-icons {
    font-family: 'Material Icons';
}

.material-icons-outlined {
    font-family: 'Material Icons Outline';
}

다시 말하지만 Sharp와 같은 더 많은 변형을 사용하려면 위의 두 가지 블록을 추가하면됩니다.

완료되면 html로 이동하여 새로 만든 아이콘을 사용하십시오.

<i class="material-icons-outlined">hourglass_empty</i>

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

에 http://materialize.com/icons.html 당신이 페이지에 포함 스타일 헤더 정보, 당신은 실제 하이퍼 링크로 이동 할 수 있으며 오프라인 아이콘에 국한 복사합니다.

방법은 다음과 같습니다 .NB : 모든 icon.css 및 somefile.woff 에서 두 개의 파일을 다운로드 합니다.

1. 헤더에서 필요에 따라 다음 URL로 이동하십시오.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> .

페이지를 whatever_filename.css로 저장합니다. 기본값은 icon.css입니다.

2. 이와 같은 줄을 찾으십시오.

src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2)

3. .woff로 끝나는 URL을 방문하십시오.

https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2. 브라우저가 자동으로 다운로드합니다. CSS 폴더에 저장하십시오.

4. 이제 icon.css 및 2fcrYFNa .... mY.wof22 두 파일이 있어야 합니다. 둘 다 css에 저장합니다. 이제 css 헤더 위치에서 디렉토리의 icon.css를 편집하십시오. .woff2 파일이 항상 icon.css와 동일한 폴더에 있는지 확인하십시오. 긴 파일 이름을 자유롭게 편집하십시오.

질문 제목은 머티리얼 아이콘을 오프라인 으로 호스팅 하는 방법을 묻지 만 본문 은 머티리얼 아이콘을 오프라인 으로 사용 하는 것이 목표임을 명확히합니다 (강조 내) .

재료 아이콘 파일의 고유 한 사본을 사용하는 것은 유효한 접근 / 구현입니다. 다른 하나는 서비스 워커를 사용할 수있는 사람들을 위해 서비스 워커 가 처리하도록하는 것입니다. 이렇게하면 사본을 구하고 최신 상태로 유지해야하는 번거 로움이 없습니다.

예를 들어 Workbox 를 사용하고 workbox -cli를 실행하고 기본값을 수락하는 가장 간단한 접근 방식을 사용 하여 서비스 워커를 생성 한 후 생성 된 서비스 워커에 다음 텍스트를 추가합니다.

workboxSW.router.registerRoute('https://fonts.googleapis.com/(.*)',
workboxSW.strategies.cacheFirst({
  cacheName: 'googleapis',
  cacheExpiration: {
    maxEntries: 20
  },
  cacheableResponse: {statuses: [0, 200]}
})
);

그런 다음 F12> Application> Storage> IndexedDB를 사용하여 Chrome에서 캐시되었는지 확인하고 이름에 googleapis가있는 항목을 찾을 수 있습니다.

2020 년 현재 저의 접근 방식은 material-icons-font 패키지 를 사용하는 것 입니다. Google의 material-design-icons 패키지 및 커뮤니티 기반 material-design-icons-iconfont 사용을 단순화 합니다.

1. 패키지를 설치하십시오. npm install material-icons-font --save

2. 프로젝트의 angular.json 파일의 스타일 속성에 패키지의 CSS 파일 경로를 추가합니다.

   ... "styles": [ "./node_modules/material-icons-font/material-icons-font.css" ], ...

3. SCSS를 사용하는 경우 아래 내용을 styles.scss 파일 맨 위에 복사하십시오.

   @import '~material-icons-font/sass/variables'; @import '~material-icons-font/sass/mixins'; $MaterialIcons_FontPath: "~material-icons-font/fonts"; @import '~material-icons-font/sass/main'; @import '~material-icons-font/sass/Regular';

4. 프로젝트의 HTML 파일에있는 아이콘을 사용하십시오.

   // Using icon tag
   <i class="material-icons">face</i>
   <i class="material-icons md-48">face</i>
   <i class="material-icons md-light md-inactive">face</i>
   
   // Using Angular Material's <mat-icon> tag
   <mat-icon>face</mat-icon>
   <mat-icon>add_circle</mat-icon>
   <mat-icon>add_circle_outline</mat-icon>

@ angular / material의 아이콘은 오프라인으로 개발할 때 깨지는 경향이 있습니다. @ angular / material과 함께 material-icons-font 패키지를 추가하면 오프라인으로 개발하는 동안 태그를 사용할 수 있습니다.

npm 패키지 설치

npm install material-design-icons --save

css 파일 경로를 styles.css 파일에 넣으십시오.

@import "../node_modules/material-design-icons-iconfont/dist/material-design-icons.css";

Kaloyan Stamatov 방법이 가장 좋습니다. 먼저 https://fonts.googleapis.com/icon?family=Material+Icons 로 이동합니다 . css 파일을 복사하십시오. 내용은 다음과 같습니다

/* fallback */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v37/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}
    
.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -moz-font-feature-settings: 'liga';
    -moz-osx-font-smoothing: grayscale;
}

글꼴 소스를 브라우저에 붙여 넣어 woff2 파일 https://fonts.gstatic.com/s/materialicons/v37/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2 를 다운로드 한 다음 원본 소스의 파일을 바꿉니다 . 원하는 경우 이름을 바꿀 수 있습니다. github에서 60MB 파일을 다운로드 할 필요가 없습니다. Dead simple 내 코드는 다음과 같습니다.

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(materialIcon.woff2) format('woff2');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -moz-font-feature-settings: 'liga';
    -moz-osx-font-smoothing: grayscale;
}

materialIcon.woff2는 다운로드 및 대체 된 woff2 파일입니다.

npm install material-design-icons

과

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

Angular Material 8에서도 저를 위해 일했습니다.

이것을 웹 구성에 추가하고 오류가 사라졌습니다.

<system.webServer>
    <staticContent>
      <remove fileExtension=".woff" /> 
      <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
      <remove fileExtension=".woff2" /> 
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>

그건 그렇고, 단계별 지침과 함께 YouTube에서 사용할 수있는 비디오가 있습니다.

https://youtu.be/7j6eOkhISzk

1. 다음은 단계입니다. https://github.com/google/material-design-icons/releases 에서 materialize 아이콘 패키지를 다운로드합니다.

2. icon-font 폴더를 복사하고 아이콘으로 이름을 바꿉니다.

3. materialize.css 파일을 열고 다음 경로를 업데이트합니다.

ㅏ. url (MaterialIcons-Regular.eot)에서 url (../ fonts / MaterialIcons-Regular.eot)로 b. url (MaterialIcons-Regular.woff2) 형식 ( 'woff2')에서 url (../ fonts / MaterialIcons-Regular.woff2) 형식 ( 'woff2')으로 c. url (MaterialIcons-Regular.woff) 형식 ( 'woff')에서 url (../ fonts / MaterialIcons-Regular.woff) 형식 ( 'woff')으로 d. url (MaterialIcons-Regular.ttf) 형식 ( 'truetype')에서 url (../ fonts / MaterialIcons-Regular.ttf) 형식 ( 'truetype')으로

3. materialize-icon.css를 css 폴더에 복사하고 html 파일에서 참조하십시오.

모든 것이 마법처럼 작동합니다!