Add/material design icons and svg4everybody

client/boot/polyfills.js

@@ -3,6 +3,7 @@
  * External dependencies
  */
 import '@babel/polyfill';
+import svg4everybody from 'svg4everybody';
 
 /**
  * Internal dependencies
@@ -11,3 +12,9 @@ import '@babel/polyfill';
 import localStoragePolyfill from 'lib/local-storage-polyfill';
 
 localStoragePolyfill();
+
+const isBrowser = typeof window !== 'undefined';
+if ( isBrowser ) {
+	// Polyfill SVG external content support. Noop in the evergreen build.
+	svg4everybody();
+}

client/components/material-icon/index.jsx

@@ -0,0 +1,42 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+import React from 'react';
+import PropTypes from 'prop-types';
+import spritePath from '@automattic/material-design-icons/svg-sprite/material-icons.svg';
+
+function MaterialIcon( props ) {
+	const { size = 24, style = 'outline', icon, onClick, className, ...otherProps } = props;
+
+	// Using a missing icon doesn't produce any errors, just a blank icon, which is the exact intended behaviour.
+	// This means we don't need to perform any checks on the icon name.
+	const iconName = `material-icon-${ icon }`;
+	const iconClass = classnames( 'material-icon', iconName, className );
+
+	const svgId = `icon-${ style }-${ icon }-${ size }px`;
+
+	return (
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="0 0 24 24"
+			className={ iconClass }
+			height={ size }
+			width={ size }
+			onClick={ onClick }
+			{ ...otherProps }
+		>
+			<use xlinkHref={ `${ spritePath }#${ svgId }` } />
+		</svg>
+	);
+}
+
+MaterialIcon.propTypes = {
+	icon: PropTypes.string.isRequired,
+	style: PropTypes.string,
+	size: PropTypes.number,
+	onClick: PropTypes.func,
+	className: PropTypes.string,
+};
+
+export default React.memo( MaterialIcon );

client/devdocs/design/playground-scope.js

@@ -81,6 +81,7 @@ export JetpackLogo from 'components/jetpack-logo';
 export LanguagePicker from 'components/language-picker';
 export ListEnd from 'components/list-end';
 export Main from 'components/main';
+export MaterialIcon from 'components/material-icon';
 export MarkedLines from 'components/marked-lines';
 export Notices from 'components/notice';
 export Pagination from 'components/pagination';