Standardize on an icon system

[slifty]

Our recent Ionicons migration exposed that we are pretty inconsistent with our iconography.

Current State: Three Icon Systems

  ┌────────────────┬───────────────────────────┬───────────────────────────────────────────────────┐                                                                                                                       
  │     System     │        Usage Count        │                  Implementation                   │                                                                                                                       
  ├────────────────┼───────────────────────────┼───────────────────────────────────────────────────┤                                                                                                                       
  │ Material Icons │ 52 occurrences (32 files) │ <i class="material-icons">name</i> via Google CDN │                                                                                                                       
  ├────────────────┼───────────────────────────┼───────────────────────────────────────────────────┤                                                                                                                       
  │ FontAwesome    │ 27 occurrences (21 files) │ <fa-icon [icon]="..."> via npm packages           │                                                                                                                       
  ├────────────────┼───────────────────────────┼───────────────────────────────────────────────────┤                                                                                                                       
  │ Ionicons       │ 14 occurrences            │ <ion-icon name="..."> as web components           │                                                                                                                       
  └────────────────┴───────────────────────────┴───────────────────────────────────────────────────┘            

Key Inconsistencies Found

Folder Icon (most notable):

• Material Icons: file-list-item.component.html:28,39, file-list-controls.component.html:40, global-search-bar.component.html:43,87,100, folder-picker.component.html:32
• Ionicons: thumbnail.component.html:10, global-search-results.component.html:57,63, nav.component.html:60

Close/Dismiss:

• Material Icons: 13+ dialogs use close
• FontAwesome: 2 announcements use <fa-icon [icon]="['fas', 'window-close']">

Search:

• Ionicons: left-menu.component.html, global-search-bar.component.html
• FontAwesome: gallery.component.html

Navigation Arrows:

• Ionicons: caret-back, caret-forward
• FontAwesome: chevron-left, chevron-down

[slifty]

We may want to lean into Material, especially if we are going to use it for our component framework

On the other hand we should also think about what icons are used in the mobile UX -- is it Font Awesome?