Material Design Icons: Bộ icon từ Google
/material-design-icons
Material Design Icons là bộ icon chính thức của Google: gồm các variable font Material Symbols đang được cập nhật và bộ Material Icons cũ đã ngừng bổ sung icon mới. Dùng bộ này nếu bạn đang xây dựng giao diện theo ngôn ngữ thiết kế Material Design và muốn icon miễn phí theo giấy phép Apache 2.0, không bắt buộc ghi công; bỏ qua nếu bạn cần một icon mà Google chưa vẽ, vì họ không nhận thiết kế SVG gửi qua pull request.
Material Design Icons và Material Symbols là gì?
Material Design Icons là tên chung cho hai bộ icon Google phát hành trên GitHub: Material Symbols, ra mắt tháng 4/2022 dưới dạng variable font, và Material Icons, bộ tĩnh cũ hơn ngừng nhận icon mới từ cùng năm đó. Cả hai dùng chung ngôn ngữ thiết kế và có sẵn dưới dạng SVG, font, và (với Symbols) variable font, theo giấy phép Apache 2.0.
Material Symbols so với Material Icons: có những gì
- ✓Material Symbols có ba variable font — Outlined, Rounded, Sharp — mỗi font đều có đủ các trục optical size (20-48, mặc định 24), weight (100 Thin đến 700 Bold, mặc định 400), grade (-50 đến 200, mặc định 0), và fill (0-100, mặc định 0).
- ✓Material Symbols không có font Filled riêng. Bạn đẩy trục Fill lên 100 để có icon đặc, và animate trục này sẽ tạo hiệu ứng fill-in khi chọn.
- ✓Material Icons giữ nguyên năm style cố định — Outlined, Filled, Rounded, Sharp, Two tone — không có trục biến đổi nào.
- ✓Repo chia theo bộ: thư mục `symbols` và `variablefont` chứa file Material Symbols, còn `android`, `font`, `ios`, `png`, `src` chứa file Material Icons.
- ✓Cả hai bộ đều xem được trực quan tại fonts.google.com/icons, với menu thả xuống để chuyển giữa Material Symbols (mặc định) và Material Icons.
- ✓Apache 2.0 áp dụng cho cả hai bộ — ghi công được hoan nghênh, không bắt buộc.
Những gì Material Symbols và Material Icons không có
- △Material Icons — font cũ với năm style — không có icon mới nào kể từ khi Google ngừng cập nhật năm 2022; icon mới hơn chỉ có trong Material Symbols.
- △Bạn không thể tự vẽ SVG rồi gửi pull request. Google tạo icon từ file nguồn nội bộ và chỉ nhận yêu cầu ý tưởng qua GitHub issue.
- △Các package npm giúp `npm install` hoạt động (material-symbols, material-icons, và các package @material-design-icons) do @marella duy trì, không phải Google kiểm duyệt.
- △Material Symbols không có icon two-tone, và chỉ cỡ 20/24px mới canh đúng pixel-grid; Material Icons không có weight, grade biến đổi hay hiệu ứng fill động.
Dùng icon trên web với Google Fonts
Cách đơn giản nhất là dùng CDN của Google Fonts: nhúng stylesheet rồi gọi icon bằng tên hoặc ligature trong CSS, không cần build. Với Material Symbols: <link href='https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined' rel='stylesheet'>. Với bộ cũ: <link href='https://fonts.googleapis.com/css2?family=Material+Icons' rel='stylesheet'>. Nếu muốn tự host, thư mục `font` và `variablefont` trong repo có sẵn file font để nhúng thẳng, còn `symbols`, `android`, `ios`, `png`, `src` chứa SVG và asset theo từng nền tảng. Bản thân Google không phát hành package npm nào sau v3 (2016); `npm install` ở đây nghĩa là bạn đang dùng package cộng đồng của @marella — material-symbols, material-icons, @material-design-icons/font, @material-design-icons/svg — tự động publish qua GitHub Actions nhưng Google không rà soát. Mọi thứ đều theo giấy phép Apache 2.0, nên dùng thương mại thoải mái không cần xin phép; README nói ghi công trong màn hình about là được hoan nghênh, không bắt buộc.
Ai nên dùng Material Design Icons
Dùng bộ này nếu bạn đang xây dựng theo Material Design (M2 hoặc M3) — app Android, Flutter, hay dashboard web muốn icon khớp đúng grid và cách đặt tên của Google. Nó sẽ không hợp nếu sản phẩm của bạn dùng ngôn ngữ hình ảnh riêng mà Material Symbols không hòa hợp được, hoặc nếu bạn cần logo thương hiệu. Logo không có trong bộ này, chấm hết — Google loại bỏ logo bên thứ ba vì lý do pháp lý.
Lựa chọn thay thế cho Material Design Icons
Câu hỏi thường gặp
Material Design Icons dùng giấy phép Apache License 2.0, nên dùng thương mại được phép mà không cần trả phí hay xin phép. README nói ghi công trong màn hình about của app là được hoan nghênh, không bắt buộc.
Nhúng stylesheet của Google Fonts — <link href='https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined' rel='stylesheet'> — rồi chỉnh các trục font-variation-settings (opsz, wght, GRAD, FILL) trong CSS để điều khiển kích cỡ, độ đậm, grade và fill.
Material Symbols là bộ hiện tại, xây dựng dưới dạng variable font từ tháng 4/2022 với weight, grade, fill, optical size chỉnh được; Material Icons là bộ cũ hơn, đã đóng băng, giữ năm style cố định và không có icon mới từ khi ngừng cập nhật năm 2022.
Bạn có thể mở một GitHub issue mô tả ý tưởng, nhưng Material Design Icons không nhận pull request kèm file SVG hoàn chỉnh — Google tạo icon từ file nguồn nội bộ và chỉ xem xét ý tưởng, không nhận artwork dựng sẵn.
Package npm chính thức của Google cho Material Icons đã ngừng cập nhật sau bản v3 năm 2016. Các package cộng đồng như material-symbols và material-icons của @marella đang phục vụ việc cài qua npm hiện nay, tự động publish qua GitHub Actions nhưng Google không rà soát.
Material Design Icons có sẵn thư mục `android`, `ios`, và `png` riêng trong repo bên cạnh các file font, nên cả hai nền tảng đều được hỗ trợ trực tiếp — Material Symbols và Material Icons chính là bộ icon mà hướng dẫn Material Design của Android dựa vào.
Trường hợp sử dụng tốt nhất
- •App Android và iOS theo Material Design, lấy asset thẳng từ thư mục `android`/`ios`.
- •Dashboard web nhúng CDN của Google Fonts và đổi trục Fill để thể hiện trạng thái đang chọn thay vì đổi file icon.
- •Design system cần một icon nhưng nhiều mức weight — Thin cho UI phụ, Bold cho hành động chính — từ cùng một variable font.
- •Setup tự host bỏ qua request mạng tới Google Fonts, dùng thư mục `font`/`variablefont` hoặc SVG đã tối ưu bằng SVGO từ @material-design-icons/svg.
Repo liên quan
Chưa chắc material-design-icons có hợp với bạn?
Để ChatGPT, Claude hoặc Perplexity tìm hiểu giúp — bấm bên dưới và xem AI nói gì về material-design-icons.