Our Material-ui avatar offers a collection of cool avatars with
different shapes, sizes and with the possibility to group them.
Examples
import React from " react " ;
// @material-ui/core components
import { makeStyles } from " @material-ui/core/styles " ;
import Avatar from " @material-ui/core/Avatar " ;
// @material-ui/icons components
// core components
import componentStyles from " assets/theme/components/avatar.js " ;
const useStyles = makeStyles ( componentStyles );
const Examples = () => {
const classes = useStyles ();
const avatarRounded = {
root : classes . avatarRounded ,
img : classes . avatarRounded ,
}
return (
<>
< Avatar alt = " ... " src = { require ( " assets/img/theme/team-4.jpg " ). default } classes = { avatarRounded } / >
< Avatar alt = " ... " src = { require ( " assets/img/theme/team-4.jpg " ). default } / >
< / >
);
};
export default Examples ;
Sizing
The most basic list group is an unordered list with list items and
the proper classes. Build upon it with the options that follow, or
with your own CSS as needed.
import React from " react " ;
// @material-ui/core components
import { makeStyles } from " @material-ui/core/styles " ;
import Avatar from " @material-ui/core/Avatar " ;
// @material-ui/icons components
// core components
import componentStyles from " assets/theme/components/avatar.js " ;
const useStyles = makeStyles ( componentStyles );
const Examples = () => {
const classes = useStyles ();
const avatarXs = {
root : classes . avatarXs ,
img : classes . avatarXs
};
const avatarSm = {
root : classes . avatarSm ,
img : classes . avatarSm
};
const avatarLg = {
root : classes . avatarLg ,
img : classes . avatarLg
};
const avatarXl = {
root : classes . avatarXl ,
img : classes . avatarXl
};
return (
<>
< Avatar
classes = { avatarXs }
alt = " ... "
src = { require ( " assets/img/theme/team-4.jpg " ). default }
/ >
< Avatar
classes = { avatarSm }
alt = " ... "
src = { require ( " assets/img/theme/team-4.jpg " ). default }
/ >
< Avatar
alt = " ... "
src = { require ( " assets/img/theme/team-4.jpg " ). default }
/ >
< Avatar
classes = { avatarLg }
alt = " ... "
src = { require ( " assets/img/theme/team-4.jpg " ). default }
/ >
< Avatar
classes = { avatarXl }
alt = " ... "
src = { require ( " assets/img/theme/team-4.jpg " ). default }
/ >
< / >
);
};
export default Examples ;
Group
import React from " react " ;
// @material-ui/core components
import Avatar from " @material-ui/core/Avatar " ;
// @material-ui/lab components
import AvatarGroup from " @material-ui/lab/AvatarGroup " ;
// @material-ui/icons components
// core components
const Examples = () => {
return (
<>
< AvatarGroup >
< Avatar
alt = " ... "
src = { require ( " assets/img/theme/team-1-800x800.jpg " ). default }
/ >
< Avatar
alt = " ... "
src = { require ( " assets/img/theme/team-2-800x800.jpg " ). default }
/ >
< Avatar
alt = " ... "
src = { require ( " assets/img/theme/team-3-800x800.jpg " ). default }
/ >
< Avatar
alt = " ... "
src = { require ( " assets/img/theme/team-4-800x800.jpg " ). default }
/ >
< /AvatarGroup >
< / >
);
};
export default Examples ;
If you want to see more examples and properties please check the
official
Material-UI Documentation .