Google ได้ปรับปรุงไอคอนการออกแบบวัสดุด้วยธีมที่กำหนดล่วงหน้าใหม่ 4 ธีม:

Outlined, Rounded, Two-Tone และ SharpนอกเหนือจากธีมFilled / Baselineปกติ:

แต่น่าเสียดายที่มันไม่ได้พูดถึงวิธีการใช้ชุดรูปแบบใหม่ทุกที่

ฉันใช้มันผ่าน Google Web Fontsโดยใส่ลิงค์:

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

จากนั้นใช้ไอคอนที่จำเป็นตามที่แนะนำในเอกสารประกอบ :

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

แต่จะแสดงรุ่น 'เต็ม / พื้นฐาน' เสมอ

ฉันได้ลองทำสิ่งต่อไปนี้เพื่อใช้ชุดรูปแบบที่ระบุแทน:

<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 Web Fonts ทันที

ดังที่ 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 เช่นกัน

หมายเหตุ: ไอคอนชุดรูปแบบทูโทนนั้นดูสับสนเล็กน้อยในปัจจุบัน

Update (14/11/2018): รายการของไอคอนโครงร่าง 16 อันที่ทำงานกับส่วนต่อท้าย "_outline"

นี่คือรายการล่าสุดของไอคอนโครงร่าง 16 อันที่ทำงานกับ Material-icons Webfont ปกติโดยใช้ส่วนต่อท้าย_outline (ทดสอบและยืนยันแล้ว)

(เท่าที่พบในหน้า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_ ระบุไว้ " และไม่ร่าง

นี่คือแฮ็คเพื่อทดสอบชุดไอคอนใหม่โดยใช้แท็กอินไลน์ มันไม่ใช่ทางออกที่เป็นทางการ

ณ วันนี้ (19 กรกฎาคม 2018) น้อยกว่า 2 เดือนนับตั้งแต่ไอคอนรูปแบบใหม่ที่ได้รับการแนะนำให้ไม่มีทาง<i class="material-icons"></i>ที่จะรวมถึงไอคอนเหล่านี้โดยใช้แท็กอินไลน์

+ มาร์ตินชี้ให้เห็นว่ามีปัญหาใน Github เกี่ยวกับสิ่งเดียวกัน: https://github.com/google/material-design-icons/issues/773

ดังนั้นจนกว่า Google จะมีวิธีแก้ปัญหาสำหรับเรื่องนี้ฉันเริ่มใช้แฮ็คเพื่อรวมชุดไอคอนใหม่เหล่านี้ในสภาพแวดล้อมการพัฒนาของฉันก่อนที่จะดาวน์โหลดไอคอนที่เหมาะสมเป็น SVG หรือ PNG และฉันคิดว่าฉันจะแบ่งปันให้กับทุกคน

สำคัญ : อย่าใช้สิ่งนี้กับสภาพแวดล้อมการผลิตเนื่องจากไฟล์ CSS ที่รวมมาจาก Google แต่ละไฟล์มีขนาดเกินกว่า 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 image-data) และนี่คือวิธีที่เราสามารถใช้สิ่งนี้เพื่อทดสอบความเข้ากันได้ของไอคอนเฉพาะในการออกแบบของเราก่อนที่จะดาวน์โหลดเพื่อใช้ในสภาพแวดล้อมการผลิต

ขั้นตอนที่ 1 :

รวมสไตล์ชีทของชุดรูปแบบที่คุณต้องการใช้ เช่น: สำหรับชุดรูปแบบ 'ระบุ' ใช้สไตล์ชีทสำหรับ '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เพื่อสลับสีจากสีดำเป็นสีขาว (สำหรับพื้นหลังสีเข้ม)

การเปลี่ยนขนาดไอคอน:

เนื่องจากนี่เป็นภาพพื้นหลังและไม่ใช่แบบอักษรไอคอนให้ใช้heightและwidthคุณสมบัติของ CSS เพื่อแก้ไขขนาดของไอคอน ค่าเริ่มต้นถูกตั้งค่าเป็น 24px ในmaterial-icons-newคลาส

ตัวอย่าง:

กรณีที่ 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>

กรณีที่สอง:สำหรับชุดรูปแบบคมชัดของไอคอนการประเมิน :

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 เป็นตัวเลือกที่ดีกว่าเมื่อมันมาถึงการเพิ่มประสิทธิภาพความเร็วไซต์ แต่ font-icons เป็นตัวช่วยประหยัดเวลาเมื่อมันมาถึงขั้นตอนการสร้างต้นแบบและตรวจสอบว่ามีไอคอนใดที่ออกแบบของคุณหรือไม่

ฉันจะอัปเดตโพสต์นี้หากและเมื่อ Google มาพร้อมกับวิธีแก้ไขปัญหาที่ไม่เกี่ยวข้องกับการดาวน์โหลดไอคอนสำหรับการใช้งาน

ตั้งแต่วันที่ 27 กุมภาพันธ์ 2019 มีแบบอักษร 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

แก้ไข: ณ วันที่ 10 มีนาคม 2019 ดูเหมือนว่าขณะนี้มีคลาสสำหรับไอคอนตัวอักษรใหม่:

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

สำหรับวัสดุเชิงมุมคุณควรใช้ fontSet input เพื่อเปลี่ยนตระกูล font:

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

หมายเหตุ: ตัวอย่างเช่นหากต้องการใช้สไตล์ที่ระบุไว้คุณต้องระบุวัสดุ - ไอคอน และ คลาสของวัสดุ - ไอคอน - เค้าร่าง

ธีมใหม่อาจไม่ใช่ส่วนหนึ่งของแบบอักษรของไอคอนวัสดุ ลิงค์

การแก้ไขล่าสุดของ Aj334 ทำงานได้อย่างสมบูรณ์แบบ

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

องค์ประกอบไอคอน

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

ไม่มีคำตอบใด ๆ ที่อธิบายวิธีการดาวน์โหลดชุดรูปแบบต่างๆของแบบอักษรนั้นเพื่อให้คุณสามารถให้บริการได้จากเว็บไซต์ของคุณ (เซิร์ฟเวอร์ WWW)

แม้ว่าสิ่งนี้อาจดูเหมือนเป็นปัญหาเล็กน้อยจากมุมมองทางเทคนิค แต่เป็นปัญหาใหญ่จากมุมมองทางกฎหมายอย่างน้อยถ้าคุณตั้งใจจะนำเสนอหน้าเว็บของคุณให้กับพลเมืองสหภาพยุโรปใด ๆ (หรือแม้กระทั่งหากคุณทำโดยบังเอิญ) นี่เป็นเรื่องจริงสำหรับ บริษัท ที่อยู่ในสหรัฐอเมริกา (หรือประเทศอื่นนอกสหภาพยุโรป)

หากใครสนใจว่าทำไมนี่คือฉันจะอัปเดตคำตอบนี้และให้รายละเอียดเพิ่มเติมที่นี่ แต่ในขณะนี้ฉันไม่ต้องการเสียพื้นที่มากเกินไปนอกหัวข้อ

ต้องพูดแบบนี้:

ฉันได้ดาวน์โหลดทุกเวอร์ชั่น (ปกติ, โครงร่าง, กลม, แหลม, ทูโทน) ของแบบอักษรนั้นตามสองขั้นตอนง่ายมาก (เป็นคำตอบของ @ Aj334 สำหรับคำถามของเขาเองซึ่งทำให้ฉันถูกทาง) (ตัวอย่าง: "outlined "ตัวแปร):

1. รับ CSS จาก Google CDN โดยให้เบราว์เซอร์ดึง URL CSSโดยตรงเช่นคัดลอก URL ต่อไปนี้ลงในแถบตำแหน่งที่ตั้งของเบราว์เซอร์:

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

   นี่จะส่งคืนหน้าเว็บที่มีหน้าตาแบบนี้ (อย่างน้อยใน Firefox 70.0.1 ตอนที่เขียนนี้):

   /* 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. ค้นหาบรรทัดที่ขึ้นต้นด้วยsrc:รหัสด้านบนและให้เบราว์เซอร์ของคุณดึง URL ที่อยู่ในบรรทัดนั้นเช่นคัดลอก URL ต่อไปนี้ลงในแถบตำแหน่งที่ตั้งของเบราว์เซอร์:

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

   ตอนนี้เบราว์เซอร์จะดาวน์โหลด.woff2ไฟล์นั้นและเสนอให้บันทึกไว้ในเครื่อง (อย่างน้อย Firefox ทำ)

ข้อสังเกตสองประการสุดท้าย:

แน่นอนคุณสามารถดาวน์โหลดตัวแปรอื่น ๆ ของแบบอักษรนั้นโดยใช้วิธีการเดียวกัน ในขั้นตอนแรกเพียงแทนที่ลำดับอักขระOutlinedใน URL ด้วยลำดับอักขระRound(ใช่จริง ๆ แม้ว่าที่นี่จะมีชื่อว่า "Rounded" ในเมนูการนำทางด้านซ้าย) SharpหรือTwo+Toneตามลำดับ หน้าผลลัพธ์จะมีลักษณะใกล้เคียงกันในแต่ละครั้ง แต่ URL ในsrc:บรรทัดของหลักสูตรนั้นแตกต่างกันสำหรับแต่ละรุ่น

สุดท้ายในขั้นตอนที่ 1 คุณยังสามารถใช้ URL นั้นได้:

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

สิ่งนี้จะส่งคืน CSS สำหรับตัวแปรทั้งหมดในหน้าเดียวซึ่งจะมีห้าsrc:บรรทัดแต่ละอันมี URL อีกอันที่กำหนดว่าแบบอักษรนั้นอยู่ที่ใด

ลิงค์ webfonts ใช้งานได้แล้วในทุกเบราว์เซอร์!

เพียงเพิ่มธีมของคุณในลิงก์แบบอักษรคั่นด้วยไพพ์ ( |) เช่นนี้

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

รูปแบบนี้จะทำงานกับวัสดุเชิงมุม:

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

ใส่ลิงค์หัวไปที่ google สไตล์

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

และในร่างกายบางอย่างเช่นนี้

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

ฉันลงเอยด้วยการใช้แอพ IcoMoon เพื่อสร้างแบบอักษรที่กำหนดเองโดยใช้ไอคอนแนวใหม่ที่ฉันต้องการสำหรับแอปพลิเคชันเว็บล่าสุด มันไม่สมบูรณ์แบบ แต่คุณสามารถเลียนแบบฟังก์ชั่น Google Font ที่มีอยู่ได้ค่อนข้างดีด้วยการตั้งค่าเล็กน้อย นี่คือการเขียน:

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

การตั้งค่าสีทูโทน:

ตามที่อธิบายไว้ข้างต้นคุณสามารถใช้colorปุ่ม css ยกเว้นวัสดุชุดรูปแบบทูโทนซึ่งดูเหมือนจะผิดพลาด ;-)

วิธีแก้ปัญหาอธิบายไว้ในหนึ่งในหลาย ๆปัญหาของวัสดุที่มีมุมเชิงมุมโดยใช้ตัวกรอง css ที่กำหนดเอง กรองที่กำหนดเองนี้สามารถสร้างขึ้นที่นี่

เช่น:

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

สิ่งที่แนบมา:

• Working Angular Stackblitz
• ตัวอย่าง Codepen
• ตัวสร้างตัวกรอง CSS Codepen