feat: Collection Icons (#1281)

* wip: Working for creation, and display

* feat: IconPicker

* fix

* feat: Invert collection icon color when dark in dark mode

* Improve readability of dropdown menus in dark mode
Suggest icon based on collection name

* Add additional icons
Tweaks and final polish

* fix: Write default icon as empty icon column

* feat: Improve icon selection logic
add more keywords
Improve icon coloring when selected and in dark mode

* lint

* lint

app/components/Sidebar/components/CollectionLink.js

@@ -2,7 +2,6 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
 import { observable } from 'mobx';
-import { CollectionIcon, PrivateCollectionIcon } from 'outline-icons';
 import Collection from 'models/Collection';
 import Document from 'models/Document';
 import CollectionMenu from 'menus/CollectionMenu';
@@ -10,6 +9,7 @@ import UiStore from 'stores/UiStore';
 import DocumentsStore from 'stores/DocumentsStore';
 import SidebarLink from './SidebarLink';
 import DocumentLink from './DocumentLink';
+import CollectionIcon from 'components/CollectionIcon';
 import DropToImport from 'components/DropToImport';
 import Flex from 'shared/components/Flex';
 
@@ -44,16 +44,7 @@ class CollectionLink extends React.Component<Props> {
         <SidebarLink
           key={collection.id}
           to={collection.url}
-          icon={
-            collection.private ? (
-              <PrivateCollectionIcon
-                expanded={expanded}
-                color={collection.color}
-              />
-            ) : (
-              <CollectionIcon expanded={expanded} color={collection.color} />
-            )
-          }
+          icon={<CollectionIcon collection={collection} expanded={expanded} />}
           iconColor={collection.color}
           expanded={expanded}
           hideDisclosure