[icons] 새로운 머티리얼 디자인 아이콘 테마를 사용하는 방법 : 아웃 라인, 라운드, 투톤 및 샤프?

Program / 글쓴이

Google은 머티리얼 디자인 아이콘 을 4 가지 새로운 사전 설정 테마로 개선했습니다 .

일반 채움 / 기준선 테마 외에 윤곽선, 원형, 2 색 및 선명도 :

그러나 불행히도 새로운 테마를 사용하는 방법을 말하지 않습니다.

내가 봤는데 Google 웹 글꼴을 통해 그것을 사용하는 링크를 포함하여 :

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

그런 다음 설명서에서 제안한 필수 아이콘을 사용하십시오 .

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

그러나 항상 ‘Filled / Baseline’버전이 표시됩니다.

대신 아웃 라인 테마 를 사용하기 위해 다음을 시도 했습니다.

<i class="material-icons">account_balance_outlined</i>
<i class="material-icons material-icons-outlined">account_balance</i>

웹 글꼴 링크를 다음으로 변경하십시오.

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

등. 그러나 작동하지 않습니다.

그리고 그렇게 어두운 곳에서 사진을 찍을 필요는 없습니다.

tl; dr : 새로운 테마를 사용해 본 사람이 있습니까? 심지어 기본 버전 (인라인 html 태그)처럼 작동합니까? 아니면 SVG 또는 PNG 형식으로 만 다운로드해야합니까?

미리 감사드립니다.

답변

업데이트 (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에 제시하면이 게시물을 업데이트 할 것입니다.

답변

2019 년 2 월 27 일부터 새로운 Material Icon 테마를위한 CSS 글꼴이 있습니다.

그러나 글꼴을 사용하려면 CSS 클래스를 만들어야합니다.

폰트 패밀리는 다음과 같습니다.

  • Material Icons Outlined -개요 아이콘
  • Material Icons Two Tone -투톤 아이콘
  • Material Icons Round -둥근 아이콘
  • Material Icons Sharp -날카로운 아이콘

예제는 아래 코드 샘플을 참조하십시오.

body {
  font-family: Roboto, sans-serif;
}

.material-icons-outlined,
.material-icons.material-icons--outlined,
.material-icons-two-tone,
.material-icons.material-icons--two-tone,
.material-icons-round,
.material-icons.material-icons--round,
.material-icons-sharp,
.material-icons.material-icons--sharp {
  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;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

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

.material-icons-two-tone,
.material-icons.material-icons--two-tone {
  font-family: 'Material Icons Two Tone';
}

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

.material-icons-sharp,
.material-icons.material-icons--sharp {
  font-family: 'Material Icons Sharp';
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
</head>

<body>
  <section id="original">
    <h2>Baseline</h2>
    <i class="material-icons">home</i>
    <i class="material-icons">assignment</i>
  </section>
  <section id="outlined">
    <h2>Outlined</h2>
    <i class="material-icons-outlined">home</i>
    <i class="material-icons material-icons--outlined">assignment</i>
  </section>
  <section id="two-tone">
    <h2>Two tone</h2>
    <i class="material-icons-two-tone">home</i>
    <i class="material-icons material-icons--two-tone">assignment</i>
  </section>
  <section id="rounded">
    <h2>Rounded</h2>
    <i class="material-icons-round">home</i>
    <i class="material-icons material-icons--round">assignment</i>
  </section>
  <section id="sharp">
    <h2>Sharp</h2>
    <i class="material-icons-sharp">home</i>
    <i class="material-icons material-icons--sharp">assignment</i>
  </section>
</body>

</html>

스 니펫 확장

아니면 Codepen에서 볼 수도 있습니다

편집 : 2019 년 3 월 10 일 현재 새로운 글꼴 아이콘에 대한 클래스가있는 것으로 보입니다.

body {
  font-family: Roboto, sans-serif;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
</head>

<body>
  <section id="original">
    <h2>Baseline</h2>
    <i class="material-icons">home</i>
    <i class="material-icons">assignment</i>
  </section>
  <section id="outlined">
    <h2>Outlined</h2>
    <i class="material-icons-outlined">home</i>
    <i class="material-icons-outlined">assignment</i>
  </section>
  <section id="two-tone">
    <h2>Two tone</h2>
    <i class="material-icons-two-tone">home</i>
    <i class="material-icons-two-tone">assignment</i>
  </section>
  <section id="rounded">
    <h2>Rounded</h2>
    <i class="material-icons-round">home</i>
    <i class="material-icons-round">assignment</i>
  </section>
  <section id="sharp">
    <h2>Sharp</h2>
    <i class="material-icons-sharp">home</i>
    <i class="material-icons-sharp">assignment</i>
  </section>
</body>

</html>

스 니펫 확장

편집 # 2 : CSS 이미지 필터 ( 이 주석 에서 수정 된 코드)를 사용하여 2 톤 아이콘을 색조로 만드는 해결 방법은 다음과 같습니다 .

body {
  font-family: Roboto, sans-serif;
}

.material-icons-two-tone {
  filter: invert(0.5) sepia(1) saturate(10) hue-rotate(180deg);
  font-size: 48px;
}

.material-icons,
.material-icons-outlined,
.material-icons-round,
.material-icons-sharp {
  color: #0099ff;
  font-size: 48px;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
</head>

<body>
  <section id="original">
    <h2>Baseline</h2>
    <i class="material-icons">home</i>
    <i class="material-icons">assignment</i>
  </section>
  <section id="outlined">
    <h2>Outlined</h2>
    <i class="material-icons-outlined">home</i>
    <i class="material-icons-outlined">assignment</i>
  </section>
  <section id="two-tone">
    <h2>Two tone</h2>
    <i class="material-icons-two-tone">home</i>
    <i class="material-icons-two-tone">assignment</i>
  </section>
  <section id="rounded">
    <h2>Rounded</h2>
    <i class="material-icons-round">home</i>
    <i class="material-icons-round">assignment</i>
  </section>
  <section id="sharp">
    <h2>Sharp</h2>
    <i class="material-icons-sharp">home</i>
    <i class="material-icons-sharp">assignment</i>
  </section>
</body>

</html>

스 니펫 확장

아니면 Codepen에서 볼 수도 있습니다

답변

각도 재질의 경우 fontSet 입력을 사용하여 글꼴 패밀리를 변경해야합니다.

<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" />

<mat-icon>edit</mat-icon>
<mat-icon fontSet="material-icons-outlined">edit</mat-icon>
<mat-icon fontSet="material-icons-two-tone">edit</mat-icon>
...

답변

웹 프로젝트에서 이미 소재 아이콘이 작동하는 경우 html 파일 및 아이콘에 사용 된 클래스에서 참조를 업데이트하면됩니다.

HTML 참조 :

전에

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

후

<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" />

소재 아이콘 클래스 :

그런 다음 className을 확인하십시오.

전에:

<i className="material-icons">weekend</i>

후:

<i className="material-icons-outlined">weekend</i>

그것은 나를 위해 작동합니다 … Pura vida!

답변

무엇 나를 위해 일한 것은 사용 _outline을 하지 _outline D를 아이콘 이름 뒤에.

<mat-icon>info</mat-icon>

vs 

<mat-icon>info_outline</mat-icon>

답변

12/05/2020 기준으로

1. CSS를 포함하십시오 :

<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">

2. 다음과 같이 사용하십시오.

<i class="material-icons">account_balance</i>
<i class="material-icons material-icons-outlined">account_balance</i>
<i class="material-icons material-icons-two-tone">account_balance</i>
<i class="material-icons material-icons-sharp">account_balance</i>
<i class="material-icons material-icons-round">account_balance</i>

참고 : 예를 들어 윤곽선 스타일을 사용하려면 재질 아이콘 및 재질 아이콘 아웃 라인 클래스 를 지정해야합니다 .

답변

새로운 테마는 머티리얼 아이콘 글꼴의 일부가 아닙니다. 링크 .