Google đã tân trang lại các Biểu tượng Thiết kế Vật liệu của mình với 4 chủ đề cài sẵn mới:

Được phác thảo, Làm tròn, Hai tông màu và Sắc nét , ngoài chủ đề F đầy / Đường cơ sở thông thường :

Nhưng, thật không may, nó không nói bất cứ nơi nào làm thế nào để sử dụng các chủ đề mới.

Tôi đã sử dụng nó thông qua Google Web Fonts bằng cách bao gồm liên kết:

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

Và sau đó sử dụng biểu tượng được yêu cầu như được đề xuất trong tài liệu :

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

Nhưng nó luôn hiển thị phiên bản 'F đầy / Đường cơ sở'.

Thay vào đó, tôi đã thử làm như sau để sử dụng chủ đề Phác thảo :

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

và, thay đổi liên kết Phông chữ Web thành:

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

vv Nhưng nó không hoạt động.

Và không có điểm nào trong việc chụp ảnh trong bóng tối như thế.

tl; dr: Có ai đã thử sử dụng các chủ đề mới chưa? Nó thậm chí hoạt động như phiên bản cơ sở (thẻ html nội tuyến)? Hoặc, nó chỉ có nghĩa là được tải xuống dưới dạng định dạng SVG hoặc PNG?

Cảm ơn trước.

Cập nhật (31/03/2019): Tất cả các chủ đề biểu tượng hoạt động thông qua Google Web Fonts ngay bây giờ.

Như Edric đã chỉ ra, bây giờ chỉ là vấn đề thêm liên kết phông chữ web google vào đầu tài liệu của bạn, như vậy:

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

Và sau đó thêm lớp chính xác để xuất biểu tượng của một chủ đề cụ thể.

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

Màu sắc của các biểu tượng cũng có thể được thay đổi bằng CSS.

Lưu ý: hiện tại các biểu tượng chủ đề Hai tông màu hơi rối mắt.

Cập nhật (14/11/2018): Danh sách 16 biểu tượng phác thảo hoạt động với hậu tố "_outline".

Đây là danh sách 16 biểu tượng phác thảo gần đây nhất hoạt động với Webfont vật liệu thông thường, sử dụng hậu tố _outline (đã được kiểm tra và xác nhận).

(Như được tìm thấy trên trang github vật liệu thiết kế-biểu tượng . Tìm kiếm: " _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> 

Lưu ý rằng pie_chart cần phải là " pie_chart_ phác thảo " và không phác thảo .

Đây là một bản hack để kiểm tra các chủ đề biểu tượng mới bằng cách sử dụng thẻ nội tuyến. Đây không phải là giải pháp chính thức.

Tính đến hôm nay (19 tháng bảy năm 2018), một ít hơn 2 tháng kể từ khi chủ đề biểu tượng mới đã được giới thiệu, không có cách nào để bao gồm các biểu tượng này sử dụng một thẻ inline <i class="material-icons"></i>.

+ Martin đã chỉ ra rằng có một vấn đề được nêu lên trên Github về vấn đề tương tự: https://github.com/google/m vật liệu- design-ions /issues / 773

Vì vậy, cho đến khi Google đưa ra giải pháp cho vấn đề này, tôi đã bắt đầu sử dụng hack để đưa các chủ đề biểu tượng mới này vào môi trường phát triển của mình trước khi tải xuống các biểu tượng thích hợp là SVG hoặc PNG. Và tôi nghĩ tôi sẽ chia sẻ nó với tất cả các bạn.

QUAN TRỌNG : Không sử dụng điều này trên môi trường sản xuất vì mỗi tệp CSS được bao gồm từ Google có kích thước trên 1MB.

Google sử dụng các bảng định kiểu này để hiển thị các biểu tượng trên trang demo của họ:

Đề cương:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">

Làm tròn:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/round.css">

Hai giai điệu:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/twotone.css">

Nhọn:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css">

Mỗi tệp này chứa các biểu tượng của các chủ đề tương ứng được bao gồm dưới dạng hình nền (dữ liệu hình ảnh Base64). Và đây là cách chúng ta có thể sử dụng điều này để kiểm tra tính tương thích của một biểu tượng cụ thể trong thiết kế của chúng tôi trước khi tải xuống để sử dụng trong môi trường sản xuất.

BƯỚC 1 :

Bao gồm biểu định kiểu của chủ đề mà bạn muốn sử dụng. Ví dụ: Đối với chủ đề 'Phác thảo', hãy sử dụng biểu định kiểu cho 'phác thảo.css'

BƯỚC 2 :

Thêm các lớp sau vào biểu định kiểu của riêng bạn :

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

BƯỚC 3 :

Sử dụng biểu tượng bằng cách thêm các lớp sau vào <i>thẻ:

1) material-icons-newlớp

2) Tên biểu tượng như được hiển thị trên trang thử nghiệm biểu tượng vật liệu, có tiền tố là tên chủ đề theo sau là dấu gạch nối.

Tiền tố:

Nêu: outline-

Làm tròn: round-

Hai giai điệu: twotone-

Nhọn: sharp-

Ví dụ: (biểu tượng 'thông báo'):

outline-announcement, round-announcement, twotone-announcement,sharp-announcement

3) Sử dụng lớp thứ 3 tùy chọn icon-whiteđể đảo ngược màu từ đen sang trắng (đối với nền tối)

Thay đổi kích thước biểu tượng:

Vì đây là hình nền chứ không phải biểu tượng phông chữ, hãy sử dụng heightvà widthcác thuộc tính của CSS để sửa đổi kích thước của các biểu tượng. Mặc định được đặt thành 24px trong material-icons-newlớp.

Thí dụ:

Trường hợp I: Dành cho Chủ đề được phác thảo của biểu tượng account_circle :

1) Bao gồm biểu định kiểu:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">

2) Thêm thẻ biểu tượng trên trang của bạn:

<i class="material-icons-new outline-account_circle"></i>

Tùy chọn (Đối với nền tối):

<i class="material-icons-new outline-account_circle icon-white"></i>

Trường hợp II: Đối với Chủ đề sắc nét của biểu tượng đánh giá :

1) Bao gồm biểu định kiểu:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css">

2) Thêm thẻ biểu tượng trên trang của bạn:

<i class="material-icons-new sharp-assessment"></i>

(Đối với nền tối):

<i class="material-icons-new sharp-assessment icon-white"></i>

Tôi không thể nhấn mạnh đủ rằng đây KHÔNG PHẢI LÀ CÁCH QUYỀN để đưa các biểu tượng vào môi trường sản xuất của bạn. Nhưng nếu bạn phải quét qua nhiều biểu tượng trên trang đang phát triển, việc này sẽ giúp việc đưa biểu tượng trở nên khá dễ dàng và tiết kiệm rất nhiều thời gian.

Tải xuống biểu tượng dưới dạng SVG hoặc PNG chắc chắn là một lựa chọn tốt hơn khi tối ưu hóa tốc độ trang web, nhưng các biểu tượng phông chữ là tiết kiệm thời gian khi đến giai đoạn tạo mẫu và kiểm tra xem một biểu tượng cụ thể có phù hợp với thiết kế của bạn không, v.v.

Tôi sẽ cập nhật bài đăng này nếu và khi Google đưa ra giải pháp cho vấn đề này không liên quan đến việc tải xuống một biểu tượng để sử dụng.

Kể từ ngày 27 tháng 2 năm 2019, có các phông chữ CSS cho các chủ đề Biểu tượng Vật liệu mới.

Tuy nhiên, bạn phải tạo các lớp CSS để sử dụng các phông chữ.

Các họ phông chữ như sau:

• Material Icons Outlined - Biểu tượng phác thảo
• Material Icons Two Tone - Biểu tượng hai tông màu
• Material Icons Round - Biểu tượng tròn
• Material Icons Sharp - Biểu tượng sắc nét

Xem mẫu mã dưới đây để biết ví dụ:

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>

Hoặc xem nó trên Codepen

EDIT: Kể từ ngày 10 tháng 3 năm 2019, dường như có các lớp cho các biểu tượng phông chữ mới:

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>

EDIT # 2: Đây là cách giải quyết các biểu tượng hai tông màu bằng cách sử dụng các bộ lọc hình ảnh CSS (mã được điều chỉnh từ nhận xét này ):

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>

Hoặc xem nó trên Codepen

Đối với vật liệu góc, bạn nên sử dụng phông chữ đầu vào để thay đổi họ phông chữ:

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

Nếu bạn đã có các biểu tượng vật liệu làm việc trong dự án web của mình, chỉ cần cập nhật tham chiếu của bạn trong tệp html và lớp được sử dụng cho các biểu tượng:

tài liệu tham khảo html:

Trước

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

Sau

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

lớp biểu tượng vật liệu:

Sau đó, chỉ cần kiểm tra className bạn đang sử dụng:

Trước:

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

Sau:

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

nó làm việc cho tôi ... Pura vida!

Điều làm việc cho tôi là sử dụng _outline chứ không phải _outline d sau tên biểu tượng.

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

đấu với

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

Kể từ ngày 12/05/2020, bạn cần phải

1. bao gồm 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. Sử dụng nó như thế này:

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

Lưu ý: Ví dụ: để sử dụng kiểu được phác thảo, Bạn cần chỉ định biểu tượng vật liệu VÀ vật liệu vật liệu-biểu tượng .

Các chủ đề mới có lẽ không phải là một phần (chưa?) Của phông chữ Biểu tượng Vật liệu. Liên kết .

Bản chỉnh sửa gần đây của Aj334 hoạt động hoàn hảo.

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

Yếu tố biểu tượng

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

Cho đến nay, không có câu trả lời nào giải thích cách tải xuống các biến thể khác nhau của phông chữ đó để bạn có thể phục vụ chúng từ trang web của riêng bạn (máy chủ WWW).

Mặc dù điều này có vẻ như là một vấn đề nhỏ từ góc độ kỹ thuật, nhưng nó là một vấn đề lớn từ góc độ pháp lý, ít nhất là nếu bạn có ý định trình bày các trang của mình cho bất kỳ công dân EU nào (hoặc thậm chí, nếu bạn làm điều đó một cách tình cờ). Điều này thậm chí đúng với các công ty cư trú tại Hoa Kỳ (hoặc bất kỳ quốc gia nào ngoài EU).

Nếu có ai quan tâm tại sao lại như vậy, tôi sẽ cập nhật câu trả lời này và cung cấp thêm một số chi tiết ở đây, nhưng hiện tại, tôi không muốn lãng phí quá nhiều không gian ngoài chủ đề.

Đã nói điều này:

Tôi đã tải xuống tất cả các phiên bản (thông thường, được phác thảo, làm tròn, sắc nét, hai tông màu) của phông chữ đó theo hai bước rất dễ dàng (đó là câu trả lời của @ Aj334 cho câu hỏi của chính anh ấy đưa tôi đi đúng hướng) (ví dụ: "đã phác thảo "Biến thể):

1. Nhận CSS từ Google CDN bằng cách trực tiếp cho phép trình duyệt của bạn tìm nạp URL CSS , tức là sao chép URL sau vào thanh vị trí của trình duyệt:

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

   Điều này sẽ trả về một trang trông như thế này (ít nhất là trong Firefox 70.0.1 tại thời điểm viết bài này):

   /* fallback */
   @font-face {
     font-family: 'Material Icons Outlined';
     font-style: normal;
     font-weight: 400;
     src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v14/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format('woff2');
   }
   
   .material-icons-outlined {
     font-family: 'Material Icons Outlined';
     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;
   }
   

2. Tìm dòng bắt đầu bằng src:mã ở trên và để trình duyệt của bạn tìm nạp URL có trong dòng đó , tức là sao chép URL sau vào thanh vị trí của trình duyệt:

   https://fonts.gstatic.com/s/materialiconsoutlined/v14/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2
   

   Bây giờ trình duyệt sẽ tải xuống .woff2tệp đó và đề nghị lưu nó cục bộ (ít nhất, Firefox đã làm).

Hai nhận xét cuối cùng:

Tất nhiên, bạn có thể tải xuống các biến thể khác của phông chữ đó bằng cách sử dụng cùng một phương pháp. Trong bước đầu tiên, chỉ cần thay thế chuỗi ký tự Outlinedtrong URL bằng các chuỗi ký tự Round(có, thực sự, mặc dù ở đây, nó được gọi là "Làm tròn" trong menu điều hướng bên trái), Sharphoặc Two+Tone, tương ứng. Trang kết quả sẽ trông gần giống nhau mỗi lần, nhưng URL trong src:dòng tất nhiên là khác nhau cho mỗi biến thể.

Cuối cùng, ở bước 1, bạn thậm chí có thể sử dụng URL đó:

https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp

Điều này sẽ trả về CSS cho tất cả các biến thể trong một trang, sau đó chứa năm src:dòng, mỗi dòng có một URL khác được chỉ định nơi đặt phông chữ tương ứng.

Liên kết webfonts hoạt động ngay bây giờ, trong tất cả các trình duyệt!

Chỉ cần thêm chủ đề của bạn vào liên kết phông chữ được phân tách bằng một đường ống ( |), như thế này

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

Sau đó tham khảo lớp, như thế này:

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

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

Mẫu này cũng sẽ hoạt động với Vật liệu góc:

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

Đặt liên kết đầu vào phong cách google

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

và trong cơ thể một cái gì đó như thế này

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

Tôi đã kết thúc việc sử dụng ứng dụng IcoMoon để tạo một phông chữ tùy chỉnh chỉ sử dụng các biểu tượng theo chủ đề mới mà tôi cần cho một bản dựng ứng dụng web gần đây. Nó không hoàn hảo nhưng bạn có thể bắt chước chức năng Google Font hiện có khá độc đáo với một chút thiết lập. Đây là một bài viết:

https://medium.com/@leemartin/how-to-use-m vật liệu-icon-outlines-rounded-two-style-and-sharp-theme-92276f2415d2

Nếu ai đó cảm thấy táo bạo, họ có thể chuyển đổi toàn bộ chủ đề bằng IcoMoon. Địa ngục, IcoMoon có thể có một quy trình nội bộ sẽ làm cho nó dễ dàng vì họ đã có Biểu tượng Vật liệu gốc được đặt trong thư viện của họ.

Dù sao, đây không phải là một giải pháp hoàn hảo, nhưng nó hiệu quả với tôi.

Tôi không hài lòng vì cho đến khi biết Google vẫn chưa phát hành các thiết kế mới của họ dưới dạng phông chữ hoặc biểu tượng svg. Vì vậy, tôi tập hợp một gói npm nhỏ để giải quyết vấn đề.

https://www.npmjs.com/package/ts-m vật liệu-icons-svg

Chỉ cần nhập các biểu tượng bạn muốn sử dụng và thêm chúng vào sổ đăng ký của bạn. Điều này cũng hỗ trợ rung cây vì chỉ những biểu tượng đó được thêm vào dự án của bạn mà bạn thực sự muốn và / hoặc cần.

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

sử dụng hai biểu tượng tông chẳng hạn

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

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

Trong mẫu html của bạn bây giờ bạn có thể sử dụng biểu tượng mới

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

Hơi buồn cười, Google đã tạo một phông chữ hoạt động chính xác trong Safari nhưng không phải trong Chrome. Đây là https://codepen.io/anon/pen/zbavza

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

Để tham khảo https://stackoverflow.com/a/54902967/4740291 và không thể thay đổi màu bằng css.

Thiết lập màu Hai tông màu:

Như đã mô tả ở trên, bạn có thể sử dụng colorphím css ngoại trừ vật liệu Chủ đề hai tông màu có vẻ bị rối mắt ;-)

Một cách giải quyết được mô tả trong một trong một số vấn đề github vật liệu góc bằng cách sử dụng bộ lọc css tùy chỉnh. Bộ lọc tùy chỉnh này có thể được tạo ở đây .

Ví dụ:

Html:

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

<i class="material-icons-two-tone red">home</i>

css:

.red {
filter: invert(8%) sepia(94%) saturate(4590%) hue-rotate(358deg) brightness(101%) contrast(112%);
}

Tài liệu đính kèm:

• Làm việc góc Stackblitz
• Ví dụ Codepen
• Trình tạo bộ lọc CSS Codepen