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
// Material Dashboard 2 React 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
// Material Dashboard 2 React Components
import MDAvatar from "components/MDAvatar";
With Icon
// Material Dashboard 2 React Components
import MDAvatar from "components/MDAvatar";
// @mui material components
import Icon from "@mui/material/Icon"
Variants
// Material Dashboard 2 React Components
import MDAvatar from "components/MDAvatar";