.ui-icon { display: block; width: 20px; height: 20px; flex: 0 0 auto; pointer-events: none; }
.ui-icon--small { width: 16px; height: 16px; }
.ui-icon--large { width: 24px; height: 24px; }
.icon-mask {
  background-color: currentColor;
  mask: var(--icon) center / contain no-repeat;
  -webkit-mask: var(--icon) center / contain no-repeat;
}
.icon-add { --icon: url('/assets/icons/add-haku.svg'); }
.icon-settings { --icon: url('/assets/icons/settings.svg'); }
.icon-back { --icon: url('/assets/icons/chevron-left.svg'); }
.icon-forward { --icon: url('/assets/icons/chevron-right-haku.svg'); }
.icon-close { --icon: url('/assets/icons/close-haku.svg'); }
.icon-delete { --icon: url('/assets/icons/delete.svg'); }
.icon-download { --icon: url('/assets/icons/download.svg'); }
.icon-logout { --icon: url('/assets/icons/logout-haku.svg'); }
.icon-mail { --icon: url('/assets/icons/mail-add.svg'); }
.icon-sync-ok { --icon: url('/assets/icons/sync-synced.svg'); }
.icon-sync-pending { --icon: url('/assets/icons/sync-pending.svg'); }
.icon-sync-error { --icon: url('/assets/icons/sync-error.svg'); }