add demo

docs/src/pages/components/avatars/FallbackAvatars.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Avatar from '@material-ui/core/Avatar';
+import { deepOrange } from '@material-ui/core/colors';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    '& > *': {
+      margin: theme.spacing(1),
+    },
+  },
+  orange: {
+    color: theme.palette.getContrastText(deepOrange[500]),
+    backgroundColor: deepOrange[500],
+  },
+}));
+
+export default function FallbackAvatars() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Avatar alt="Remy Sharp" src="/broken-image.jpg" className={classes.orange}>
+        B
+      </Avatar>
+      <Avatar alt="Remy Sharp" src="/broken-image.jpg" className={classes.orange} />
+      <Avatar src="/broken-image.jpg" />
+    </div>
+  );
+}

docs/src/pages/components/avatars/FallbackAvatars.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { makeStyles, createStyles, Theme } from '@material-ui/core/styles';
+import Avatar from '@material-ui/core/Avatar';
+import { deepOrange } from '@material-ui/core/colors';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      display: 'flex',
+      '& > *': {
+        margin: theme.spacing(1),
+      },
+    },
+    orange: {
+      color: theme.palette.getContrastText(deepOrange[500]),
+      backgroundColor: deepOrange[500],
+    },
+  }),
+);
+
+export default function FallbackAvatars() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Avatar alt="Remy Sharp" src="/broken-image.jpg" className={classes.orange}>
+        B
+      </Avatar>
+      <Avatar alt="Remy Sharp" src="/broken-image.jpg" className={classes.orange} />
+      <Avatar src="/broken-image.jpg" />
+    </div>
+  );
+}

docs/src/pages/components/avatars/avatars.md

@@ -30,3 +30,13 @@ Icon avatars are created by passing an icon as `children`.
 If you need square or rounded avatars, use the `variant` prop.
 
 {{"demo": "pages/components/avatars/VariantAvatars.js"}}
+
+## Fallbacks
+
+The component will fallback if there is an error loading the avatar image, in this order, to:
+
+- the provided children
+- the first letter of tha `alt` text
+- a generic avatar icon
+
+{{"demo": "pages/components/avatars/FallbackAvatars.js"}}

packages/material-ui/src/Avatar/Avatar.js

@@ -53,8 +53,8 @@ export const styles = theme => ({
   },
   /* Styles applied to the fallback icon */
   fallback: {
-    width: '80%',
-    height: '80%',
+    width: '75%',
+    height: '75%',
   },
 });
 
@@ -126,7 +126,7 @@ const Avatar = React.forwardRef(function Avatar(props, ref) {
         {...imgProps}
       />
     );
-  } else if (childrenProp) {
+  } else if (childrenProp != null) {
     children = childrenProp;
   } else if (hasImg && alt) {
     children = alt[0];

test/utils/createDOM.js

@@ -6,6 +6,7 @@ const whitelist = [
   // required for fake getComputedStyle
   'CSSStyleDeclaration',
   'Element',
+  'Image',
   'HTMLElement',
   'HTMLInputElement',
   'Performance',