MDUIDocsEnglish简体中文LightDarkSystem
Preset Colors
Custom Color
Extract Color from Wallpaper
Select a Wallpaper
Getting Started
Styles
Frameworks
Components
Avatar Badge BottomAppBar Button ButtonIcon Card Checkbox Chip CircularProgress Collapse Dialog Divider Dropdown Fab Icon Layout LinearProgress List Menu NavigationBar NavigationDrawer NavigationRail Radio RangeSlider Select SegmentedButton Slider Snackbar Switch Tabs TextField Tooltip TopAppBar
Functions
Libraries

Avatar

Avatars represent users or entities by displaying images, icons, or characters.

Usage

Import the component:

import 'mdui/components/avatar.js';

Import the TypeScript type:

import type { Avatar } from 'mdui/components/avatar.js';

Example:

<mdui-avatar src="https://avatars.githubusercontent.com/u/3030330?s=40&v=4"></mdui-avatar>

Examples

Image Avatar

To use an image as the avatar, specify the image link using the src attribute, or provide an <img> element within the default slot.

The fit attribute determines how the image should fit the container box. It works similar to the native object-fit property.

Icon Avatar

To use a Material Icons icon as the avatar, specify the icon using the icon attribute. Alternatively, provide an icon element within the default slot.

Character Avatar

You can use any text within the default slot as the avatar.

API

Properties

AttributePropertyReflectTypeDefault
srcsrcstring-

URL of the avatar image.

fitfit'contain' | 'cover' | 'fill' | 'none' | 'scale-down'-

Image resizing method, similar to the native CSS object-fit. Possible values:

  • contain: Scales the image to fit within the box while maintaining the aspect ratio. The image will be "letterboxed" if the aspect ratios do not match.
  • cover: Scales the image to fill the box while maintaining the aspect ratio. The image will be clipped if the aspect ratios do not match.
  • fill: Default. Scales the image to fill the box. The image will be stretched if the aspect ratios do not match.
  • none: No resizing.
  • scale-down: Scales as if none or contain were specified, choosing the smaller result.
iconiconstring-

The Material Icons name for the avatar.

labellabelstring-

Text description of the avatar.

Slots

Name
(default)

Custom avatar content, such as letters, <img> elements, icons, etc.

CSS Parts

Name
image

Internal <img> element when using an image avatar.

icon

Internal <mdui-icon> element when using an icon avatar.

CSS Custom Properties

Name
--shape-corner

The size of the component corner. You can use a specific pixel value, but it's recommended to reference design tokens.

On this page