Switch the VPN to use our Phosphor-based icon set

We've decided to replace our use of Material Symbols (the default icon system used in Android as per the Material Design language) to one based on the free an open source project Phosphor instead (see tpo/ux/design#62 (closed)). While Material Symbols are also published under a free software license, we were motivated to adopt a single icon system for the Tor VPN, our websites, and future applications for future ease of maintenance.

This issue is to track the work involved in updating the VPN to use the new icon set.

• SVGs for the VPN only: Nextcloud link
• Full Tor icon set: Figma link
• VPN designs: Figma link

Design estimate:

• Complexity: small (1 day)
• Uncertainty: moderate (1.5)
• Total: 1 day (expected) – 1.5 days (worst case)

Icons

icon	used for...
arrow-left	Back buttons: top-app-bar
arrow-up-right	External links: faqs-card
atom	Experimental features: onboarding
book-open-text	Help tab: navigation-bar
bridge	N/A, will eventually be used in Configure Connection
bug-beetle	Bug reports: onboarding
chats-circle	Support links: faqs-card
connect	Connect tab: navigation-bar; Connection section: configure
connect-broken	Connection errors: error
copy-simple	Copying content: tor-logs
gear	Configure tab: navigation-bar; Connection card: connect; Current bridge card: connection-bridges-on
globe-hemisphere-west	Exit location FAB: exit-fab
health	Exit location health indicators: exit-list
onion-rings	About section: configure
prohibit	Onboarding dialog: onboarding
qr-code	NA, potentially will use on add-bridges dialog
refresh-circuit	Refreshing single apps: new-circuit
refresh-all	Refreshing all circuits: refresh-circuits
squares-four	Apps lists: apps-card; Apps section: configure
stop	Stop FAB: connected
trend-down	Downwards trends: data-card
trend-up	Upwards trends: data-card
x	Closing overlays: add-bridges
x-circle	Clearing content: add-bridges-filled