refactor: use material icons with Newspack color

package.json

@@ -93,6 +93,8 @@
     "url": "https://github.com/Automattic/newspack-listings/issues"
   },
   "dependencies": {
+    "@material-ui/core": "^4.11.3",
+    "@material-ui/icons": "^4.11.2",
     "@wordpress/api-fetch": "^3.12.0",
     "@wordpress/base-styles": "^1.5.0",
     "@wordpress/block-editor": "^3.11.0",

src/blocks/category.js

@@ -1,5 +1,5 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
 import { getCategories, setCategories } from '@wordpress/blocks';
 

src/blocks/curated-list/edit.js

@@ -28,12 +28,17 @@ import { withDispatch, withSelect } from '@wordpress/data';
 import { Fragment, useEffect, useState } from '@wordpress/element';
 import { addQueryArgs } from '@wordpress/url';
 
+/**
+ * External dependencies
+ */
+import ListAlt from '@material-ui/icons/ListAlt';
+
 /**
  * Internal dependencies
  */
 import { Listing } from '../listing/listing';
 import { SidebarQueryControls } from '../../components';
-import { List, Query, Specific } from '../../svg';
+import { Query, Specific } from '../../svg';
 import { getContrastRatio, getCuratedListClasses, useDidMount } from '../../editor/utils';
 
 /**
@@ -372,7 +377,10 @@ const CuratedListEditorComponent = ( {
 	 */
 	if ( isEmpty ) {
 		return (
-			<Placeholder icon={ <List /> } label={ __( 'Curated List', 'newspack-listings' ) }>
+			<Placeholder
+				icon={ <ListAlt style={ { color: '#36f' } } /> }
+				label={ __( 'Curated List', 'newspack-listings' ) }
+			>
 				<Notice isDismissible={ false }>
 					{ __( 'Your site doesn’t have any listings. Create some to get started.' ) }
 				</Notice>
@@ -385,7 +393,7 @@ const CuratedListEditorComponent = ( {
 		return (
 			<div className="newspack-listings__placeholder">
 				<BlockVariationPicker
-					icon={ <List /> }
+					icon={ <ListAlt style={ { color: '#36f' } } /> }
 					label={ __( 'Curated List', 'newspack-listings' ) }
 					instructions={ __( 'Select the type of list to start with.' ) }
 					onSelect={ variation => {

src/blocks/curated-list/index.js

@@ -1,23 +1,27 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { InnerBlocks } from '@wordpress/block-editor';
 import { registerBlockType } from '@wordpress/blocks';
 
+/**
+ * External dependencies
+ */
+import ListAlt from '@material-ui/icons/ListAlt';
+
 /**
  * Internal dependencies
  */
 import './editor.scss';
 import { CuratedListEditor } from './edit';
-import { List } from '../../svg';
 import metadata from './block.json';
 const { attributes, category, name } = metadata;
 
 export const registerCuratedListBlock = () => {
 	registerBlockType( name, {
 		title: __( 'Curated List', 'newspack-listing' ),
-		icon: <List />,
+		icon: <ListAlt style={ { color: '#36f' } } />,
 		category,
 		keywords: [
 			__( 'curated', 'newspack-listings' ),

src/blocks/event-dates/index.js

@@ -1,22 +1,26 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { registerBlockType } from '@wordpress/blocks';
 
+/**
+ * External dependencies
+ */
+import Event from '@material-ui/icons/Event';
+
 /**
  * Internal dependencies
  */
 import './editor.scss';
 import { EventDatesEditor } from './edit';
-import { Event } from '../../svg';
 import metadata from './block.json';
 const { attributes, category, name } = metadata;
 
 export const registerEventDatesBlock = () => {
 	registerBlockType( name, {
 		title: __( 'Event Dates', 'newspack-listing' ),
-		icon: <Event />,
+		icon: <Event style={ { color: '#36f' } } />,
 		category,
 		keywords: [
 			__( 'curated', 'newspack-listings' ),

src/blocks/list-container/index.js

@@ -1,24 +1,28 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { InnerBlocks } from '@wordpress/block-editor';
 import { registerBlockType } from '@wordpress/blocks';
 
+/**
+ * External dependencies
+ */
+import ListAlt from '@material-ui/icons/ListAlt';
+
 /**
  * Internal dependencies
  */
 import './editor.scss';
 import { ListContainerEditor } from './edit';
-import { List } from '../../svg';
 import parentData from '../curated-list/block.json';
 
 const parentAttributes = parentData.attributes;
 
 export const registerListContainerBlock = () => {
 	registerBlockType( 'newspack-listings/list-container', {
 		title: __( 'Curated List', 'newspack-listing' ),
-		icon: <List />,
+		icon: <ListAlt style={ { color: '#36f' } } />,
 		category: 'newspack',
 		parent: [ 'newspack-listings/curated-list' ],
 		keywords: [

src/blocks/listing/edit.js

@@ -1,5 +1,5 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import apiFetch from '@wordpress/api-fetch';

src/blocks/listing/index.js

@@ -1,5 +1,5 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { registerBlockType } from '@wordpress/blocks';
@@ -9,9 +9,9 @@ import { registerBlockType } from '@wordpress/blocks';
  */
 import './editor.scss';
 import { ListingEditor } from './edit';
-import { List } from '../../svg';
 import metadata from './block.json';
 import parentData from '../curated-list/block.json';
+import { getIcon } from '../../editor/utils';
 
 const parentAttributes = parentData.attributes;
 const { attributes, category } = metadata;
@@ -22,7 +22,7 @@ export const registerListingBlock = () => {
 		if ( post_types.hasOwnProperty( listingType ) ) {
 			registerBlockType( `newspack-listings/${ listingType }`, {
 				title: listingType.charAt( 0 ).toUpperCase() + listingType.slice( 1 ),
-				icon: <List />,
+				icon: getIcon( listingType ),
 				category,
 				parent: [ 'newspack-listings/list-container' ],
 				keywords: [

src/blocks/listing/listing.js

@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 
 /**
- * External dependencies
+ * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { Notice } from '@wordpress/components';

src/editor/utils.js

@@ -3,14 +3,14 @@
  */
 
 /**
- * External dependencies
+ * WordPress dependencies
  */
 import { useEffect, useRef } from '@wordpress/element';
 
 /**
- * Internal dependencies
+ * External dependencies
  */
-import { Event, Generic, Marketplace, Place } from '../svg';
+import { Business, Event, List, LocationOn } from '@material-ui/icons';
 
 /**
  * Check if the current post in the editor is a listing CPT.
@@ -156,12 +156,12 @@ export const capitalize = str => str[ 0 ].toUpperCase() + str.slice( 1 );
 export const getIcon = listingTypeSlug => {
 	switch ( listingTypeSlug ) {
 		case 'event':
-			return Event;
+			return <Event style={ { color: '#36f' } } />;
 		case 'marketplace':
-			return Marketplace;
+			return <Business style={ { color: '#36f' } } />;
 		case 'place':
-			return Place;
+			return <LocationOn style={ { color: '#36f' } } />;
 		default:
-			return Generic;
+			return <List style={ { color: '#36f' } } />;
 	}
 };