program story

새로운 머티리얼 디자인 아이콘 테마를 사용하는 방법 : 윤곽선, 둥근, 투톤 및 샤프?

inputbox 2020. 8. 12. 08:16
반응형

새로운 머티리얼 디자인 아이콘 테마를 사용하는 방법 : 윤곽선, 둥근, 투톤 및 샤프?

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

일반 채우기 / 기준 테마 외에도 윤곽선, 둥근, 투톤 및 샤프 :

그러나 불행히도 새로운 테마를 사용하는 방법은 어디에도 나와 있지 않습니다.

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

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

그런 다음 문서에서 제안 하는 필수 아이콘을 사용합니다 .

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

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

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

<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 형식으로 만 다운로드 할 수 있습니까?

미리 감사드립니다.

업데이트 (2019 년 3 월 31 일) : 이제 모든 아이콘 테마가 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를 사용하여 변경할 수도 있습니다.

참고 : 투톤 테마 아이콘은 현재 약간 이상합니다.

업데이트 (2018 년 11 월 14 일) : "_outline"접미사와 함께 작동하는 16 개의 개요 아이콘 목록입니다.

다음은 _outline 접미사 (테스트 및 확인)를 사용하여 일반 Material-icons 웹 폰트와 함께 작동하는 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_는 설명 '이 아니라 개요 .

인라인 태그를 사용하여 새로운 아이콘 테마를 테스트하는 해킹입니다. 공식적인 해결책이 아닙니다.

새로운 아이콘 테마가 도입 된 지 2 개월이 조금 지난 오늘 (2018 년 7 월 19 일) 현재, 인라인 태그를 사용하여 이러한 아이콘을 포함 할 방법이 없습니다<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) icon-white검은 색에서 흰색으로 색상을 반전시키기 위해 3 등급 옵션을 사용합니다 (어두운 배경의 경우).

아이콘 크기 변경 :

이것은 글꼴 아이콘이 아닌 배경 이미지 이므로 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 일부터 새로운 머티리얼 아이콘 테마 용 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 이미지 필터 를 사용하여 투톤 아이콘에 색조를 적용하는 해결 방법입니다 ( 이 주석 에서 조정 된 코드 ).

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에서 보기

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

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

vs 

<mat-icon>info_outline</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!

새로운 테마는 아마도 Material Icons 글꼴의 일부가 아닐 것입니다. 링크 .

각도 재질의 경우 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>
...

Aj334의 최근 편집은 완벽하게 작동합니다.

구글 CDN

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

이제 웹 폰트 링크가 모든 브라우저에서 작동합니다!

다음 |과 같이 파이프 ( )로 구분 된 글꼴 링크에 테마를 추가하기 만하면됩니다.

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

그런 다음 다음과 같이 클래스를 참조하십시오.

// class="material-icons" or class="material-icons-outlined"

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

이 패턴은 Angular Material에서도 작동합니다.

<mat-icon>account_balance</mat-icon>
<mat-icon class="material-icons-outlined">account_balance</mat-icon>

IcoMoon 앱을 사용하여 최근 웹 앱 빌드에 필요한 새로운 테마 아이콘 만 사용하여 사용자 지정 글꼴을 만들었습니다. 완벽하지는 않지만 약간의 설정만으로 기존 Google 글꼴 기능을 매우 멋지게 모방 할 수 있습니다. 여기에 글이 있습니다.

https://medium.com/@leemartin/how-to-use-material-icon-outlined-rounded-two-tone-and-sharp-themes-92276f2415d2

누군가 대담하다고 느끼면 IcoMoon을 사용하여 전체 테마를 변환 할 수 있습니다. 지옥, IcoMoon은 이미 라이브러리에 원래 머티리얼 아이콘 세트가 있기 때문에 쉽게 만들 수있는 내부 프로세스가있을 것입니다.

어쨌든 이것은 완벽한 해결책은 아니지만 저에게는 효과적이었습니다.

Google이 아직 새로운 디자인을 글꼴 또는 svg 아이콘 세트로 출시하지 않았다는 사실을 알기 전까지는 불만족 스러웠습니다. 따라서 문제를 해결하기 위해 작은 npm 패키지를 구성했습니다.

https://www.npmjs.com/package/ts-material-icons-svg

사용하려는 아이콘을 가져 와서 레지스트리에 추가하기 만하면됩니다. 이것은 또한 당신이 정말로 원하거나 필요로하는 아이콘들만 프로젝트에 추가되기 때문에 트리 쉐이킹을 지원합니다.

npm i --save https://github.com/MarcusCalidus/ts-material-icons-svg.git

예를 들어 두 가지 톤 아이콘을 사용하려면

import {icon_edit} from 'ts-material-icons-svg/dist/twotone';

matIconRegistry.addSvgIcon(
            'edit',
            domSanitizer.bypassSecurityTrustResourceUrl(icon_edit),
        );

HTML 템플릿에서 이제 새 아이콘을 사용할 수 있습니다.

<mat-icon svgIcon="edit"></mat-icon>

다소 유쾌하게도 Google은 Safari에서는 제대로 작동하지만 Chrome에서는 작동하지 않는 글꼴을 만들었습니다. 여기에 https://codepen.io/anon/pen/zbavza가 있습니다.

<i class="material-icons-round red">warning</i>

사파리에서 빨간색 둥근 경고 재료 아이콘

https://stackoverflow.com/a/54902967/4740291 을 참조 하고 css를 사용하여 색상을 변경할 수 없습니다.

참고 URL : https://stackoverflow.com/questions/50303454/how-to-use-the-new-material-design-icon-themes-outlined-rounded-two-tone-and

반응형

'program story' 카테고리의 다른 글

오류 : Libtool 라이브러리가 사용되었지만 'LIBTOOL'이 정의되지 않았습니다.  (0) 2020.08.13
자바의 이상한 정수 복싱  (0) 2020.08.12
Microsoft는 순환 참조가있는 어셈블리를 어떻게 만들었습니까?  (0) 2020.08.12
JSF 대 Facelets 대 JSP  (0) 2020.08.12
$ (document) .ready 필요합니까?  (0) 2020.08.12

'program story'의 다른글

  • 현재글새로운 머티리얼 디자인 아이콘 테마를 사용하는 방법 : 윤곽선, 둥근, 투톤 및 샤프?

관련글

댓글

티스토리툴바