Sử dụng Icons từ Google Fonts

Để thêm Icons vào website, bạn chỉ cần thêm tập tin CSS do Google cung cấp này vào mã nguồn.

<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />

Tùy chỉnh Icons bằng CSS

Điều đặc biệt của Icons của Google Fonts là bạn có thể tùy chỉnh các biểu tượng qua CSS.

.material-symbols-outlined {
    font-variation-settings:
        'FILL' 0,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24
}

Chọn biểu tượng

Để tìm kiếm biểu tượng, bạn vào liên kết sau để tìm kiếm nhé.

Đến Google Fonts

Ví dụ

<span class="material-symbols-outlined">search</span>
<span class="material-symbols-outlined">home</span>
<span class="material-symbols-outlined">menu</span>
<span class="material-symbols-outlined">close</span>
<span class="material-symbols-outlined">settings</span>

Ta được kết quả như sau. Vì đây là phông chữ nên các bạn tùy chỉnh kích thước bằng font-size nhé.

Chúc các bạn thành công!