각도 재질 아이콘이 작동하지 않음

앵귤러 용 머티리얼을 설치했습니다.

내 앱 모듈 MatIconModule ( import { MatIconModule } from '@angular/material/icon';) 에서 가져 왔습니다.

내 ngmodule 가져 오기 아래에 다음을 추가했습니다.

@NgModule({
    imports: [ 
//...
MatIconModule, 
//...

모든 스타일 시트를 가져 왔습니다.

또한 실제로 사용하려는 앱 구성 요소 ( import {MatIconModule} from '@angular/material/icon';시작 부분에 다른 줄이 있음)에서 가져 왔습니다 .

그러나 머티리얼 아이콘은 여전히 ​​나타나지 않습니다.

예를 들어, 다음 줄은 다음과 같습니다.

<button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon></button>

나는 다음과 같은 것을 기대하고 있습니다.

하지만 나는 이것을 얻습니다.

제안 사항이 있습니까?

머티리얼 아이콘에 CSS 스타일 시트를 추가하세요!

index.html에 다음을 추가하십시오.

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

참조-https: //github.com/angular/material2/issues/7948

Angular 6+의 경우 :

1. npm 설치 : npm install material-design-icons

2. angular.json에 스타일을 추가합니다.

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

SASS를 사용하는 경우 다음 행을 기본 .scss파일 에 추가하기 만하면 됩니다.

@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

Google에서 아이콘을 가져 오지 않으려면 Material Icons Guide에 설명 된대로 아이콘을 자체 호스팅 할 수도 있습니다 .

웹 글꼴을 자체 호스팅하려는 경우 몇 가지 추가 설정이 필요합니다. https://example.com/material-icons.woff 와 같은 위치에서 아이콘 글꼴을 호스팅하고 다음 CSS 규칙을 추가합니다.

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

또한 글꼴을 올바르게 렌더링하려면 아이콘 렌더링을위한 CSS 규칙을 선언해야합니다. 이러한 규칙은 일반적으로 Google 웹 글꼴 스타일 시트의 일부로 제공되지만 글꼴을 자체 호스팅 할 때 프로젝트에 수동으로 포함해야합니다.

.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';
}

MatIconModule을 가져 와서 index.html에서 다음 URL을 사용해야합니다.

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

제 경우에는 글꼴 패밀리를 재정의하는 스타일이 적용되었습니다. 그래서 다음과 같이 명시 적으로 글꼴 패밀리 스타일을 추가했습니다.

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

전체 솔루션은 다음과 같습니다.

1 단계

당신은 수입에 가지고 MatIconModule내 프로젝트에서 나는, 당신이 사용하거나 직접 가져올 수 있습니다 나는이 AppModule에 가져올 별도의 파일에 필요한 구성 요소를 가져, 프로젝트에서 :

import { NgModule } from "@angular/core";
import { MatButtonModule } from '@angular/material';
import { MatIconModule } from '@angular/material/icon';

@NgModule({
    imports: [MatIconModule, MatButtonModule], // note the imports 
    exports: [MatIconModule, MatButtonModule], // and the exports
})
export class MaterialModule { }

2 단계

에 아이콘 글꼴을로드합니다 index.html.

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

제 경우에는 제가 작성한 아이콘 이름이 어떤 아이콘과도 연결되지 않았습니다.

여기에서 올바른 이름을 확인할 수 있습니다 : https://material.io/tools/icons/?style=baseline

제 경우에는! important를 사용하여 글꼴을 망 쳤기 때문에 아이콘이 나타나지 않았습니다. 그것을 제거하면 아이콘이 나타납니다.

아이콘이 표시되지 않는 문제가 발생했습니다. Basavaraj Bhusani가 제공 한 단계를 따랐지만 여전히 작동하지 않습니다.

문제는 내 scss text-transform: uppercase에서 아이콘에 'arrow_forward'내용 만 표시하는 원인이 있다는 것입니다. text-transform: none아이콘의을 특별히 변경해야 했습니다. 그렇지 않으면 렌더링되지 않습니다.

                .child-item-action {

                    text-transform: uppercase;

                    &:after {

                        font-family: 'Material Icons';
                        content: "arrow_forward";
                        text-transform: none;
                        -webkit-font-feature-settings: 'liga';

                    }

앱으로 가져 오기 전에 hammerJs 설치에 대해 아무도 말하지 않았다는 것을 깨달았습니다. 처음에 hammerJs를 가져와야하는 비슷한 문제가있는 사람들을 위해 설치를 위해 NPM, Yarn 또는 google CDN을 사용할 수 있습니다. 이 답변은 NPM 또는 Yarn으로 설치하는 경우입니다.

NPM

npm install --save hammerjs

실

yarn add hammerjs

설치 후 앱의 진입 점 (예 : src / main.ts)으로 가져옵니다.

import 'hammerjs';

Google CDN을 사용하고 싶다면 Angular 자료를 방문하여 자세한 설명을 확인하세요. https://material.angular.io/guide/getting-started

잘못된 아이콘 이름 : 일부 머티리얼 아이콘 이름이 잘못되었습니다.

예 : 재질 아이콘 은 다음을 위해 filter_alt 를 제공 합니다.

<mat-icon aria-hidden="false" aria-label=" filter icon">filter_alt</mat-icon>

하지만 나타납니다 😟

수정 : 깔때기 유형 아이콘에 filter_list_alt 를 사용해야 합니다.

<mat-icon aria-hidden="false" aria-label="filter icon">filter_list_alt</mat-icon>

기존 Angular Material 스타일 또는 아이콘에 어떤 영향을주는 다른 스타일을 덮어 쓴 경우 문제가 발생할 수 있습니다. 스타일링 및 테스트 외부로 아이콘 코드를 이동합니다.

저에게는 글꼴 변형 : 작은 대문자;

그래서 방금 자식 요소로 옮겼습니다. 아래는 Angular Material 그리드의 일부입니다.

  <mat-grid-tile colspan="3" rowspan="1" class='title customGlobalGrid'>
    <mat-icon aria-hidden="false" aria-label="Example home icon">home</maticon>
    <span style="font-variant: small-caps;">{{item['title']}}</span>
  </mat-grid-tile>

index.html에 다음을 추가하십시오.

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

**Add following code to your css**

 .material-icons {  
    /* 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';
}