removes AlertIcon for simpler API

docs/pages/api/alert.md

@@ -25,6 +25,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
+| <span class="prop-name">startIcon</span> | <span class="prop-type">node</span> |  | Element placed before the children. |
 | <span class="prop-name">color</span> | <span class="prop-type">'primary'<br>&#124;&nbsp;'secondary'<br>&#124;&nbsp;'default'<br>&#124;&nbsp;'error'</span> |  |  |
 | <span class="prop-name">elevation</span> | <span class="prop-type">number</span> |  |  |
 | <span class="prop-name">variant</span> | <span class="prop-type">'text'<br>&#124;&nbsp;'filled'<br>&#124;&nbsp;'outline'<br>&#124;&nbsp;'banner'</span> |  |  |
@@ -39,6 +40,8 @@ Any other props supplied will be provided to the root element (native element).
 - Style sheet details:
 
 - `root`
+- `alertContent`
+- `startIcon`
 
 You can override the style of the component thanks to one of these customization points:
 

docs/src/pages/components/alert/SimpleAlert.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { Button } from '@material-ui/core';
+import InfoIcon from '@material-ui/icons/Info';
 import {
   Alert,
-  AlertIcon,
   AlertTitle,
   AlertClose,
   AlertDescription,
@@ -11,8 +11,9 @@ import {
 
 export default function SimpleAlert() {
   return (
-    <Alert>
-      <AlertIcon />
+    <Alert
+      startIcon={<InfoIcon />}
+    >
       <AlertTitle>Sorry, results couldn&apos;t be loaded</AlertTitle>
       <AlertClose />
       <AlertDescription>

docs/src/pages/components/alert/SimpleAlert.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
 import { Button } from '@material-ui/core';
-import { Alert, AlertIcon, AlertTitle, AlertClose, AlertDescription, AlertActions } from '@material-ui/lab';
+import { Alert, AlertTitle, AlertClose, AlertDescription, AlertActions } from '@material-ui/lab';
+import InfoIcon from '@material-ui/icons/Info';
 
 export default function SimpleAlert() {
   return (
-    <Alert>
-      <AlertIcon />
+    <Alert
+      startIcon={<InfoIcon />}
+    >
       <AlertTitle>
         Sorry, results couldn&apos;t be loaded
       </AlertTitle>

packages/material-ui-lab/src/Alert/Alert.js

@@ -5,17 +5,41 @@ import { withStyles } from '@material-ui/core/styles';
 
 export const styles = () => ({
   root: {
-    padding: '1em 4em',
+    padding: '1em 4em 1em 1em',
     border: '1px solid black',
     position: 'relative',
+    display: 'flex',
+  },
+  alertContent: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
+  startIcon: {
+    marginTop: '0.25em',
+    marginRight: '1em',
   },
 });
 
 const Alert = React.forwardRef(function Alert(props, ref) {
-  const { children, classes, className } = props;
+  const {
+    children,
+    classes,
+    className,
+    startIcon: startIconProp,
+  } = props;
+
+  const startIcon = startIconProp && (
+    <span className={clsx(classes.startIcon)}>
+      {startIconProp}
+    </span>
+  );
+
   return (
     <div className={clsx(classes.root, className)} ref={ref}>
-      {children}
+      {startIcon}
+      <div className={clsx(classes.alertContent, className)}>
+        {children}
+      </div>
     </div>
   );
 });
@@ -37,6 +61,11 @@ Alert.propTypes = {
    */
   className: PropTypes.string,
 
+  /**
+   * Element placed before the children.
+   */
+  startIcon: PropTypes.node,
+
   /*
    * Main color for the Alert, picked from theme palette
    */

packages/material-ui-lab/src/index.d.ts

@@ -10,9 +10,6 @@ export * from './AlertClose';
 export { default as AlertDescription } from './AlertDescription';
 export * from './AlertDescription';
 
-export { default as AlertIcon } from './AlertIcon';
-export * from './AlertIcon';
-
 export { default as AlertTitle } from './AlertTitle';
 export * from './AlertTitle';
 

packages/material-ui-lab/src/index.js

@@ -11,9 +11,6 @@ export * from './AlertClose';
 export { default as AlertDescription } from './AlertDescription';
 export * from './AlertDescription';
 
-export { default as AlertIcon } from './AlertIcon';
-export * from './AlertIcon';
-
 export { default as AlertTitle } from './AlertTitle';
 export * from './AlertTitle';