Example from https://react-md.dev/packages/avatar/demos#simple-usage

Avatar Example - Simple Usage

<!DOCTYPE html>
<html lang="en" class="light-theme">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Material+Icons|Roboto:400,500,700|Source+Code+Pro"
    />
    
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/gh/mlaursen/react-md@5.1.6/themes/react-md.teal-pink-200-light.min.css"
    />
    <title>Avatar Example - Simple Usage</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

.container {
  :global .rmd-avatar {
    margin: 1rem;
    vertical-align: top;
  }
}


import type { HTMLAttributes, ReactElement } from "react";
import cn from "classnames";

import styles from "./Container.module.scss";

export default function Container({
  children,
  className,
  ...props
}: HTMLAttributes<HTMLDivElement>): ReactElement {
  return (
    <div className={cn(styles.container, className)} {...props}>
      {children}
    </div>
  );
}


import type { ReactElement } from "react";
import { Avatar } from "@react-md/avatar";
import { FontIcon } from "@react-md/icon";
import { NoteSVGIcon } from "@react-md/material-icons";

import Container from "./Container";

export default function Demo(): ReactElement {
  return (
    <Container>
      <Avatar src="https://picsum.photos/40/40?image=153" />
      <Avatar src="https://picsum.photos/40/40?image=103" color="blue" />
      <Avatar>A</Avatar>
      <Avatar color="orange">PL</Avatar>
      <Avatar color="red">
        <FontIcon>favorite</FontIcon>
      </Avatar>
      <Avatar color="teal">
        <NoteSVGIcon />
      </Avatar>
    </Container>
  );
}


@use "@react-md/theme/dist/color-palette" as *;
// Note: Outside of codesandbox, this can be `@forward "react-md" with (`
@forward "react-md/dist/everything" with (
  $rmd-theme-light: true,
  $rmd-theme-primary: $rmd-teal-500,
  $rmd-theme-secondary: $rmd-pink-a-200,
);


import { render } from "react-dom";
import { Configuration } from "@react-md/layout";

// the styles are actually loaded as the pre-compiled themes in the index.html
// to speed up sandbox compilation. If you want to update the theme, you'll need
// to uncomment this line and remove the `<link>` tag in the `index.html`
// import "./styles.scss"

import Demo from "./Demo";

const App = () => (
  <Configuration>
    <Demo />
  </Configuration>
);

render(<App />, document.getElementById("root"));


@use "./everything" as *;

@include react-md-utils;
