Icon

54 inline SVG icons ported từ PrimeNG. Tất cả share viewBox 0 0 14 14, dùng currentColor → màu kế thừa text, size scale theo px hoặc 1em.

Gallery — click vào icon để tuỳ chỉnh & copy code

Mở dialog điều chỉnh size / màu / spin / aria-label và sinh sẵn snippet cho 3 cách dùng (<dg-icon>, .dgi mask-image, .dgf webfont).

54 / 54

Size

12 · 16 · 24 · 32 · 48 px
14px inline 20px inline 32px inline size="1em" scales với font-size cha

Màu — currentColor

info success warn danger accent

Spin

prop spin apply 1s linear infinite rotation

Compose vào nút

Đã bấm Lưu: 0 lần

CSS class builds — không cần Angular

Cùng bộ icon được build ra 2 file CSS độc lập (xem scripts/build-icon-artifacts.mjs). Dùng trong plain HTML, email template, React/Vue, hoặc web component không có Angular.

1. Mask-image (dg-icons.css) — khuyến nghị

Class: .dgi + .dgi-<name>. Size 1em × 1em, màu = currentColor (qua background). Single CSS file ~150 KB (data-URI SVG inline).

font-size: 24px · color: #1d4ed8
<link rel="stylesheet" href="https://dungeon-ui-cdn.pages.dev/icons/dg-icons.css">
<i class="dgi dgi-check"></i>
<i class="dgi dgi-spinner dgi--spin"></i>

2. Webfont (dg-icons-font.css) — fallback

Class: .dgf + .dgf-<name>. Glyph trong PUA U+E001…, font ~11 KB TTF / 7 KB WOFF. Dùng khi mask-image không phù hợp (email, một số PDF pipeline, hoặc thích ergonomics kiểu PrimeIcons).

font-size: 24px · color: #16a34a
<link rel="stylesheet" href="https://dungeon-ui-cdn.pages.dev/icons/dg-icons-font.css">
<i class="dgf dgf-check"></i>
<i class="dgf dgf-spinner dgf--spin"></i>

So sánh

Aspect<dg-icon>.dgi (mask).dgf (font)
Cần AngularCóKhôngKhông
currentColorfillbackgroundfont color
Resize[size] px / emfont-size (1em)font-size
Spin[spin].dgi--spin.dgf--spin
File size~80 KB JS~150 KB CSS~11 KB TTF + 3 KB CSS
Tree-shakableKhi import nameKhông (single file)Không (single font)

Accessibility

Mặc định aria-hidden="true" (decorative). Khi cần icon đứng một mình mang nghĩa, set ariaLabel — component sẽ chuyển sang role="img" + aria-label.

<dg-icon name="info-circle" />decorative — screen reader bỏ qua
<dg-icon name="info-circle" ariaLabel="Thông tin" />role="img" — screen reader đọc "Thông tin"