MDAvatar
Create avatar with different styles simply by using MDAvatar component. It uses the MUI Avatar in base and you can use all of the props from MUI Avatar for the MDAvatar component.
The below codes are editable and you can modify them the way you want directly from your browser, please use the green button or the ctrl + s to save the changes.
Demo
// NextJS Material Dashboard 2 components
import MDAvatar from "/components/MDAvatar";
Props Information
| Name | Type | Default | Description |
|---|---|---|---|
| bgColor | 'transparent''primary''secondary''info''success''warning''error''light''dark' | transparent | Change the MDAvatar background color if src is not defined. |
| size | 'xs''sm''md''lg''xl''xxl' | md | Change the MDAvatar size. |
| shadow | 'none''xs''sm''md''lg''xl''xxl''inset' | none | Set a box-shadow for the MDAvatar. |
| MUI Props | You can pass all of the MUI Avatar props for the MDAvatar as well. |
Sizes
// NextJS Material Dashboard 2 components
import MDAvatar from "/components/MDAvatar";
With Icon
// NextJS Material Dashboard 2 components
import MDAvatar from "/components/MDAvatar";
// @mui material components
import Icon from "@mui/material/Icon"
Variants
// NextJS Material Dashboard 2 components
import MDAvatar from "/components/MDAvatar";