canonical
Icon names in Icon props are out-of-date
The Icon component's props define a set of expected icon names here: https://github.com/canonical/react-components/blob/60dd4449c266b6d3d08dbb9ec6d4a164162a3944/src/components/Icon/Icon.tsx#L7
However, this is out-of-date with the current state of Vanilla.
The following icons are missing (click to expand)
- add-canvas
- add-logical-volume
- add-partition
- applications
- archive
- arrow-bottom-left
- arrow-bottom-right
- arrow-down
- arrow-left
- arrow-right
- arrow-top-left
- arrow-top-right
- arrow-up
- back-to-top
- begin-downloading
- blueprint
- book
- bundle
- canvas
- certificate
- certification
- change-version
- chevron-left
- chevron-right
- cluster-host
- comments
- conflict
- conflict-grey
- conflict-resolution
- conflict-resolution-grey
- connected
- contact
- containers
- contextual-menu
- controllers
- copy-to-clipboard
- credit-card
- cursor
- desktop
- disconnect
- edit
- error-grey
- export
- exposed
- file
- file-blank
- filter
- folder
- fork
- fullscreen
- get-link
- gift
- halfscreen-bar
- heading
- highlight-off
- highlight-on
- home
- image
- import
- in-progress
- inspector-debug
- iso
- loading-steps
- location
- lock-locked
- lock-locked-active
- lock-unlock
- log-out
- machines
- map
- maximise-bar
- minimise-bar
- models
- mount
- mount-2
- notifications
- open-terminal
- pause
- pin
- plans
- play
- pods
- power-error
- power-off
- power-on
- priority-critical
- priority-high
- priority-low
- priority-medium
- priority-negligible
- priority-unknown
- private-key
- profile
- profiles
- question
- quote
- repository
- restart
- revisions
- security
- security-error
- security-tick
- security-warning
- select
- select-add
- select-remove
- settings
- single-host
- snapshot
- snooze
- sort-both
- sort-down
- sort-up
- starred
- statistics
- status
- status-failed-small
- status-in-progress
- status-in-progress-small
- status-queued
- status-queued-small
- status-succeeded-small
- status-waiting
- status-waiting-small
- stop
- submit-bug
- success-grey
- switcher
- switcher-dashboard
- switcher-environments
- tag
- task-outstanding
- thumbs-down
- thumbs-up
- tidy
- timed-out
- timed-out-grey
- toggle-side-nav
- topic
- turn-off-notification
- unit-pending
- unit-running
- units
- unmount
- unstarred
- upload
- usb
- user-group
- video-play
- warning-grey
- website
This is quite a few missing icons, and the type currently allows for other strings to be passed in, so I'm not sure how high-priority it is to add these icons to the props. https://github.com/canonical/react-components/blob/60dd4449c266b6d3d08dbb9ec6d4a164162a3944/src/components/Icon/Icon.tsx#L54
Icon CSS is usually imported on a usage basis down in the projects. This is to keep the size footprint from unused icons small. In the current Icon component css we import common icons and one custom one.
We should probably not import all icons in the library CSS. As this will increase bundle sizes for consumers that don't need all the icons. Then again, I am not sure how big the footprint actually is.
