IconAvatar - Admin Components

The IconAvatar component renders an icon inside an avatar-like container, which the Avatar component from Medusa UI doesn't support. The Medusa Admin uses it in section headers and sidebar links, such as the location details page.

Code
import { IconAvatar } from "@medusajs/dashboard/components"

Example#

Show an icon avatar at the top of a widget:

Code
1import { defineWidgetConfig } from "@medusajs/admin-sdk"2import { IconAvatar } from "@medusajs/dashboard/components"3import { Buildings } from "@medusajs/icons"4import { Container, Heading } from "@medusajs/ui"5
6const LocationWidget = () => {7  return (8    <Container className="flex items-center gap-x-3">9      <IconAvatar size="large" variant="squared">10        <Buildings />11      </IconAvatar>12      <Heading level="h2">Warehouse</Heading>13    </Container>14  )15}16
17export const config = defineWidgetConfig({18  zone: "product.details.before",19})20
21export default LocationWidget

Props#