dotCMS / dotCMS/core

Migrated portlets: adopt Material Symbols (Rounded) as the sole icon style

Open
#36,693 1 comment 0 reactions 1 assignee View on GitHub

@AP2300 is already working on this.

Since Jul 22, 2026.

Team : Modernization Type : Task
Dominant language
Java
Stars
970
Forks
486
Avg merge
3d 33m
Merged PRs (30d)
170

Description

Description

Adopt Material Symbols (Rounded) as the single icon style across every portlet migrated by Modernization. Currently these portlets ship a mix of icon systems (dominated by PrimeIcons pi pi-*), which drifts from the platform-wide design direction and produces an inconsistent UI over time.

Design requirement: Material Symbols Rounded, no exceptions.

Reference: https://fonts.google.com/icons?icon.style=Rounded

Scope

All portlets migrated by Modernization:

  • dot-tags
  • dot-query-tool
  • dot-es-search
  • dot-velocity-playground
  • dot-publishing-queue
  • dot-locales
  • dot-categories
  • dot-plugins
Acceptance Criteria
  • The Material Symbols Rounded font is available application-wide (loaded once at the app shell / global stylesheet if not already present).
  • Every icon in the portlets listed above uses material-symbols-rounded — no pi pi-* (PrimeIcons) references remain in those portlets.
  • Semantic mapping is preserved when swapping icons, e.g.:
    • pi-playplay_arrow
    • pi-trashdelete
    • pi-downloaddownload
    • pi-uploadupload
    • pi-chevron-down / pi-chevron-upkeyboard_arrow_down / keyboard_arrow_up
    • pi-exclamation-trianglewarning
    • pi-question-circlehelp
    • pi-copycontent_copy
    • pi-searchsearch
    • pi-times-circlecancel
    • pi-info-circleinfo
    • pi-tagssell
    • pi-locklock
  • Where PrimeNG components accept an icon attribute (buttons, p-inputIcon, file upload triggers, etc.), use the PrimeNG idiom that supports custom icons (icon pTemplate slot, or content projection) so Material Symbols renders correctly inside PrimeNG shells.
  • Existing accessibility attributes (aria-label, aria-hidden, [attr.aria-label]) are preserved on each icon element.
  • Manual QA per portlet: toolbar, table row actions, empty states, dialogs, help/tooltip triggers, error/warning banners — no icon missing or broken.
  • Existing material-symbols-outlined usages in the codebase (e.g. libs/portlets/edit-ema/ui/) are noted but out of scope for this ticket unless they belong to a listed migrated portlet.
Priority

Medium — design consistency across migrated portlets.

Additional Context

Reference: https://fonts.google.com/icons?icon.style=Rounded

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.