Skip to content

Conversation

@slifty
Copy link
Contributor

@slifty slifty commented Jan 20, 2026

This PR removes our use of ionicons -- both as a package, or as included vendor code.

Instances of ionicons have been replaced with material icons instead. Here's the specific list of locations:

  ┌──────────────────────────────────────────────────────────────┬────────────────────┬───────────────┬───────────────────────────────┐             
  │                           Location                           │      Ionicon       │ Material Icon │          Description          │             
  ├──────────────────────────────────────────────────────────────┼────────────────────┼───────────────┼───────────────────────────────┤             
  │ Left Menu (left-menu.component.html)                         │                    │               │                               │             
  ├──────────────────────────────────────────────────────────────┼────────────────────┼───────────────┼───────────────────────────────┤             
  │ Search menu item                                             │ search             │ search        │ Mobile search link            │             
  ├──────────────────────────────────────────────────────────────┼────────────────────┼───────────────┼───────────────────────────────┤             
  │ Invitations menu item                                        │ person-add         │ person_add    │ Invitations dialog link       │             
  ├──────────────────────────────────────────────────────────────┼────────────────────┼───────────────┼───────────────────────────────┤             
  │ Add Storage menu item                                        │ add-circle         │ add_circle    │ Storage dialog link           │             
  ├──────────────────────────────────────────────────────────────┼────────────────────┼───────────────┼───────────────────────────────┤             
  │ Help menu item                                               │ help-circle        │ help          │ Help link                     │             
  ├──────────────────────────────────────────────────────────────┼────────────────────┼───────────────┼───────────────────────────────┤             
  │ Log Out menu item                                            │ exit               │ logout        │ Logout button                 │             
  ├──────────────────────────────────────────────────────────────┼────────────────────┼───────────────┼───────────────────────────────┤             
  │ Nav (nav.component.html)                                     │                    │               │                               │             
  ├──────────────────────────────────────────────────────────────┼────────────────────┼───────────────┼───────────────────────────────┤             
  │ New folder button                                            │ folder             │ folder        │ Create folder button          │             
  ├──────────────────────────────────────────────────────────────┼────────────────────┼───────────────┼───────────────────────────────┤             
  │ Members Dialog (members-dialog.component.html)               │                    │               │                               │             
  ├──────────────────────────────────────────────────────────────┼────────────────────┼───────────────┼───────────────────────────────┤             
  │ Access role info (x2)                                        │ information-circle │ info          │ Tooltip trigger for role info │             
  ├──────────────────────────────────────────────────────────────┼────────────────────┼───────────────┼───────────────────────────────┤             
  │ Folder Picker (folder-picker.component.html)                 │                    │               │                               │             
  ├──────────────────────────────────────────────────────────────┼────────────────────┼───────────────┼───────────────────────────────┤             
  │ Back button                                                  │ caret-back         │ chevron_left  │ Navigation back               │             
  ├──────────────────────────────────────────────────────────────┼────────────────────┼───────────────┼───────────────────────────────┤             
  │ File Viewer (file-viewer.component.html)                     │                    │               │                               │             
  ├──────────────────────────────────────────────────────────────┼────────────────────┼───────────────┼───────────────────────────────┤             
  │ Back button                                                  │ caret-back         │ chevron_left  │ Close/back navigation         │             
  ├──────────────────────────────────────────────────────────────┼────────────────────┼───────────────┼───────────────────────────────┤             
  │ File List Item (file-list-item.component.html)               │                    │               │                               │             
  ├──────────────────────────────────────────────────────────────┼────────────────────┼───────────────┼───────────────────────────────┤             
  │ Share indicator                                              │ people             │ group         │ Shows item is shared          │             
  ├──────────────────────────────────────────────────────────────┼────────────────────┼───────────────┼───────────────────────────────┤             
  │ Global Search Bar (global-search-bar.component.html)         │                    │               │                               │             
  ├──────────────────────────────────────────────────────────────┼────────────────────┼───────────────┼───────────────────────────────┤             
  │ Search icon                                                  │ search             │ search        │ Search input icon             │             
  ├──────────────────────────────────────────────────────────────┼────────────────────┼───────────────┼───────────────────────────────┤             
  │ Global Search Results (global-search-results.component.html) │                    │               │                               │             
  ├──────────────────────────────────────────────────────────────┼────────────────────┼───────────────┼───────────────────────────────┤             
  │ Search icon                                                  │ search             │ search        │ Search input icon             │             
  ├──────────────────────────────────────────────────────────────┼────────────────────┼───────────────┼───────────────────────────────┤             
  │ Folder icon (x2)                                             │ folder             │ folder        │ Folder items in results       │             
  ├──────────────────────────────────────────────────────────────┼────────────────────┼───────────────┼───────────────────────────────┤             
  │ Breadcrumbs (breadcrumbs.component.html)                     │                    │               │                               │             
  ├──────────────────────────────────────────────────────────────┼────────────────────┼───────────────┼───────────────────────────────┤             
  │ Share indicator                                              │ people             │ group         │ Shows folder is shared        │             
  ├──────────────────────────────────────────────────────────────┼────────────────────┼───────────────┼───────────────────────────────┤             
  │ Breadcrumb (breadcrumb.component.html)                       │                    │               │                               │             
  ├──────────────────────────────────────────────────────────────┼────────────────────┼───────────────┼───────────────────────────────┤             
  │ Separator                                                    │ caret-forward      │ arrow_right   │ Path separator                │             
  ├──────────────────────────────────────────────────────────────┼────────────────────┼───────────────┼───────────────────────────────┤             
  │ Timeline Breadcrumbs (timeline-breadcrumbs.component.html)   │                    │               │                               │             
  ├──────────────────────────────────────────────────────────────┼────────────────────┼───────────────┼───────────────────────────────┤             
  │ Separator                                                    │ caret-forward      │ arrow_right   │ Path separator                │             
  ├──────────────────────────────────────────────────────────────┼────────────────────┼───────────────┼───────────────────────────────┤             
  │ Thumbnail (thumbnail.component.html)                         │                    │               │                               │             
  ├──────────────────────────────────────────────────────────────┼────────────────────┼───────────────┼───────────────────────────────┤             
  │ Folder icon                                                  │ folder             │ folder        │ Folder thumbnail              │             
  └──────────────────────────────────────────────────────────────┴────────────────────┴───────────────┴───────────────────────────────┘ 

Resolves #893
Related to #899

We were using embedded SCSS from ionicons instead of their recommended
approach which is to use web components + their npm package (though we
WERE using their npm package).

The original plan was to move to web components, but in doing so we
realized that ionicons is one of three separate icon libraries we're
using in the front end.  Given this we decided that the best approach
would be to remove ionicons entirely and use material icons for now.

We expect to potentially migrate from material as well, but this is
still a step in the right direction.

Issue #893 Move to ionicons web components
@slifty slifty force-pushed the 893-remove-ionicons branch from 9943d69 to 59b362e Compare January 20, 2026 23:45
@codecov
Copy link

codecov bot commented Jan 20, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 47.80%. Comparing base (02eb5ef) to head (59b362e).

Additional details and impacted files
@@            Coverage Diff             @@
##             main     #904      +/-   ##
==========================================
- Coverage   47.82%   47.80%   -0.02%     
==========================================
  Files         351      351              
  Lines       11292    11292              
  Branches     1889     1889              
==========================================
- Hits         5400     5398       -2     
+ Misses       5705     5701       -4     
- Partials      187      193       +6     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Copy link
Member

@cecilia-donnelly cecilia-donnelly left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@slifty slifty requested a review from omnignorant January 21, 2026 19:52
@slifty slifty added the QA This issue is ready for QA / user acceptance testing label Jan 21, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

QA This issue is ready for QA / user acceptance testing

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Move to ionicons web components

3 participants