Ký hiá»u Material là gì?
Biá»u tượng Material là các biá»u tượng má»i nhất của chúng tôi, hợp nhất hÆ¡n 2.500 ký tá»± trong má»t tá»p phông chữ duy nhất vá»i nhiá»u biến thá» thiết kế. Các biá»u tượng có sẵn á» 3 kiá»u và 4 trục phông chữ có thá» Äiá»u chá»nh Äược (mà u tô, Äá» Äáºm, cấp Äá» và kÃch thÆ°á»c quang há»c). Xem bá» Äầy Äủ các biá»u tượng Material trong ThÆ° viá»n biá»u tượng Material.
Trục FILL
Mà u tô cho phép bạn sá»a Äá»i kiá»u biá»u tượng mặc Äá»nh. Má»t biá»u tượng duy nhất có thá» hiá»n thá» cả trạng thái không Äược lấp Äầy và trạng thái Äã lấp Äầy.
Äá» thá» hiá»n chuyá»n Äá»i trạng thái, hãy sá» dụng trục tô mà u cho ảnh Äá»ng hoặc tÆ°Æ¡ng tác. Giá trá» là 0 cho giá trá» mặc Äá»nh hoặc 1 nếu Äược Äiá»n hoà n toà n. Cùng vá»i trục trá»ng sá», mà u ná»n cÅ©ng tác Äá»ng Äến giao diá»n của biá»u tượng.
Trục wght
Trá»ng sá» xác Äá»nh Äá» Äáºm nét của biá»u tượng, vá»i phạm vi trá»ng sá» từ má»ng (100) Äến Äáºm (700). Trá»ng sá» cÅ©ng có thỠảnh hÆ°á»ng Äến kÃch thÆ°á»c tá»ng thá» của biá»u tượng.
Trục GRAD
Trá»ng sá» và cấp ÄỠảnh hÆ°á»ng Äến Äá» dà y của biá»u tượng. Các ná»i dung Äiá»u chá»nh Äá» chấm Äiá»m chi tiết hÆ¡n so vá»i viá»c Äiá»u chá»nh trá»ng sá» và có tác Äá»ng nhá» Äến kÃch thÆ°á»c của biá»u tượng.
Äiá»m cÅ©ng có á» má»t sá» phông chữ vÄn bản. Bạn có thá» khá»p mức Äiá»m giữa vÄn bản và ký hiá»u Äá» có hiá»u ứng hình ảnh hà i hoà . Và dụ: nếu phông chữ vÄn bản có giá trá» Äiá»m -25, thì các ký hiá»u có thá» khá»p vá»i giá trá» phù hợp, chẳng hạn nhÆ° -25.
Bạn có thá» dùng Äiá»m cho nhiá»u nhu cầu:
Nhấn thấp (và dụ: -25 Äiá»m): Äá» giảm Äá» chói cho biá»u tượng ánh sáng trên ná»n tá»i, hãy sá» dụng cấp Äá» thấp.
Nhấn mạnh (và dụ: cấp 200): Äá» là m ná»i báºt má»t biá»u tượng, hãy tÄng cấp Äá» dÆ°Æ¡ng.
Trục opsz
KÃch thÆ°á»c quang há»c dao Äá»ng từ 20 dp Äến 48 dp.
Äá» hình ảnh trông giá»ng nhau á» nhiá»u kÃch thÆ°á»c, trá»ng sá» nét (Äá» dà y) sẽ thay Äá»i khi kÃch thÆ°á»c biá»u tượng theo tá»· lá». KÃch thÆ°á»c quang há»c có cách tá»± Äá»ng Äiá»u chá»nh Äá» Äáºm nét khi bạn tÄng hoặc giảm kÃch thÆ°á»c biá»u tượng.
Lấy ký hiá»u Material
Biá»u tượng Material có sẵn á» má»t sá» Äá»nh dạng và phù hợp vá»i nhiá»u loại dá»± án và ná»n tảng, cho cả nhà phát triá»n trong ứng dụng lẫn nhà thiết kế trong bản minh hoạ hoặc nguyên mẫu.
Cấp phép
Biá»u tượng Material có trong Giấy phép Apache phiên bản 2.0.
Duyá»t qua và tải từng biá»u tượng xuá»ng
Bá» ký hiá»u Material hoà n chá»nh có trong ThÆ° viá»n biá»u tượng Material á» Äá»nh dạng SVG hoặc PNG. Các Äá»nh dạng nà y phù hợp vá»i web, Android và iOS hoặc vá»i bất kỳ công cụ nà o dà nh cho nhà thiết kế.
Kho lưu trữ Git
Kho lÆ°u trữ git chứa toà n bá» Biá»u tượng Material á» Äá»nh dạng SVG.
$ git clone https://github.com/google/material-design-icons
Sá» dụng ký hiá»u Material
SỠdụng trong web
Phông chữ Material Symbols là cách dá» nhất Äá» kết hợp Material Symbols và o các dá»± án web.
Các biá»u tượng Äược Äóng gói thà nh má»t phông chữ duy nhất Äá» nhà phát triá»n web có thá» dá» dà ng kết hợp các biá»u tượng nà y chá» bằng má»t và i dòng mã.
Phông chữ tÄ©nh vá»i Google Fonts
Cách dá» nhất Äá» thiết láºp phông chữ biá»u tượng Äá» dùng trong má»i trang web là thông qua Google Fonts. Bao gá»m má»t dòng HTML sau:
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
Äoạn mã trên bao gá»m cấu hình mặc Äá»nh cho má»i Trục, vá»i trá»ng sá» á» mức 400, kÃch thÆ°á»c quang há»c á» mức 48, cấp á» mức 0 và fill (cÅ©ng là 0).
Sá» dụng API CSS phông chữ Äá» Äá»nh cấu hình các giá trá» trục khác nhau. Hãy xem các và dụ sau:
Phông chữ biến Äá»i vá»i Google Fonts
Nếu bạn Äang tạo ảnh Äá»ng cho biá»u tượng thông qua CSS hoặc muá»n kiá»m soát tá»t hÆ¡n các tÃnh nÄng của biá»u tượng, hãy sá» dụng phông chữ biến Äá»i Biá»u tượng Google. Bằng cách sá» dụng các dải ô, á» Äá»nh dạng number..number
,
chúng ta có thá» tải toà n bá» phông chữ biến. Hãy xem phần Há» trợ phông chữ thay Äá»i của tôi có thá» sá» dụng không Äá» tìm hiá»u xem ngÆ°á»i dùng của bạn có thá» tải phông chữ biến Äá»i Äược không (rất có thá» là Äược). Sau Äây là má»t sá» và dụ:
Hoặc tháºm chà tạo ảnh Äá»ng cho ảnh!
Tự lưu trữ phông chữ
Lưu trữ
phông chữ biá»u tượng
á» má»t vá» trà mà bạn kiá»m soát, Äá» quyết Äá»nh thá»i Äiá»m cáºp nháºt tà i sản. Và dụ: nếu URL là https://example.com/material-symbols.woff
, hãy thêm quy tắc CSS sau:
@font-face {
font-family: 'Material Symbols Outlined';
font-style: normal;
src: url(https://example.com/material-symbols.woff) format('woff');
}
Äá» hiá»n thá» phông chữ Äúng cách, hãy khai báo các quy tắc CSS vá» viá»c hiá»n thá» biá»u tượng. Các quy tắc nà y thÆ°á»ng Äược phân phát dÆ°á»i dạng má»t phần của biá»u Äá»nh kiá»u API Google Fonts, nhÆ°ng sẽ cần Äược ÄÆ°a và o dá»± án theo cách thủ công khi tá»± lÆ°u trữ:
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
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;
}
Sá» dụng các biá»u tượng trong HTML
Các và dụ Äược cung cấp á» trên sá» dụng má»t tÃnh nÄng chÃnh tả có tên là ghép ná»i, cho phép hiá»n thá» ký tá»± biá»u tượng chá» bằng tên vÄn bản. Trình duyá»t web tá»± Äá»ng thay thế dấu gạch ná»i vÄn bản bằng vectÆ¡ biá»u tượng và cung cấp mã dá»
Äá»c hÆ¡n so vá»i tham chiếu ký tá»± sá» tÆ°Æ¡ng ÄÆ°Æ¡ng. Và dụ: trong HTML, bạn sẽ có arrow_forward
Äá» biá»u thá» biá»u tượng thay vì 
. Äá»i vá»i các biá»u tượng khác, hãy sá» dụng kiá»u viết hoa rắn của tên biá»u tượng (tức là thay thế dấu cách bằng dấu gạch dÆ°á»i).
TÃnh nÄng nà y Äược há» trợ trong hầu hết trình duyá»t hiá»n Äại trên cả máy tÃnh và thiết bá» di Äá»ng. Hãy xem phần Há» trợ dấu gạch ná»i của tôi có thá» sá» dụng không Äá» xem ngÆ°á»i dùng của bạn có thá» xá» lý dấu gạch ná»i hay không. Có nhiá»u khả nÄng là há» có thá» xá» lý dấu gạch ná»i nà y.
Nếu bạn cần há» trợ các trình duyá»t không há» trợ dấu gạch ná»i, hãy chá» Äá»nh các biá»u tượng bằng cách sá» dụng tham chiếu ký tá»± sá» (còn gá»i là Äiá»m mã) nhÆ° và dụ dÆ°á»i Äây:
Tìm cả tên biá»u tượng và Äiá»m mã trong ThÆ° viá»n biá»u tượng Material bằng cách chá»n má»t biá»u tượng bất kỳ và má» bảng Äiá»u khiá»n phông chữ biá»u tượng. Má»i phông chữ biá»u tượng có má»t chá» mục Äiá»m mã trong kho lÆ°u trữ git của Google Fonts hiá»n thá» toà n bá» bá» tên và mã ký tá»±.
Tạo kiá»u biá»u tượng trong Material Design
Các biá»u tượng nà y Äược thiết kế theo nguyên tắc thiết kế Material Design và hiá»n thá» Äẹp nhất khi sá» dụng mà u và kÃch thÆ°á»c biá»u tượng Äược Äá» xuất. Các kiá»u dÆ°á»i Äây giúp bạn dá» dà ng áp dụng các kÃch thÆ°á»c, mà u sắc và trạng thái hoạt Äá»ng Äược Äá» xuất.
SỠdụng trong Android
Trong ThÆ° viá»n biá»u tượng Material, tất cả các biá»u tượng Äá»u á» Äá»nh dạng VectÆ¡ vẽ Äược. Äá» tìm hiá»u thêm, hãy xem tà i liá»u vá» Android Vector Asset Studio.
SỠdụng trong iOS
Các biá»u tượng nà y cÅ©ng có sẵn á» Äá»nh dạng Biá»u tượng Apple. Äá» tìm hiá»u thêm vá» biá»u tượng Apple, vui lòng xem thông tin tá»ng quan chÃnh thức vá» biá»u tượng Apple và hÆ°á»ng dẫn sá» dụng.
SỠdụng trong Flutter
Chúng tôi Äã lên kế hoạch há» trợ Flutter cho Material Symbols. Hãy luôn cáºp nháºt.