Badge avatar doubled

[theromis]

Truing to implement Badge avatar from tutorial https://material-ui.com/components/avatars/ (bottom one With badge ) implemented this code:

        mListItem(onClick = { handleShowMenuClick(it) }) {
            attrs {
                alignItems = MListItemAlignItems.flexStart
            }
            mBadge(
                badgeContent = mAvatar {
                css {
                    width = 22.px
                    height = 22.px
                    border = "2px solid #fff"
                }
                attrs {
                    alt = props.user.name
                    src = props.user.thumbnail
                }
            }
            ) {
                mAvatar {
                    attrs {
                        alt = props.user.name
                        src = props.user.thumbnail
                    }
                }
            }
            mListItemText (
                primary = props.user.name,
                secondary = props.user.location
            )
        }

Can somebody see what I'm doing wrong?

also I can't find ability set for mBadge:

        overlap="circle"
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'right',
        }}

[cfnz]

Often when assigning a component as a prop, you need to set addAsChild to false so it doesn't get rendered at the call site and later by Material UI (i.e. twice). So maybe on the mAvatar assigned to the badge component go mAvatar(addAsChild = false).

For the last question I did not quite understand what you were meaning. In terms of the anchorOrigin props, you have to use anchorOriginVertical and anchorOriginHorizontal.

[theromis]

Thank you for great help, now I fixed everything what I need, and my snippet looks like:

        mListItem(onClick = { handleShowMenuClick(it) }) {
            attrs {
                alignItems = MListItemAlignItems.flexStart
            }
            mListItemAvatar {
                val icon = props.user.getIcon()
                if (icon.isNotEmpty()) {
                    mBadge(
                        badgeContent = mIcon(icon, addAsChild = false) {
                            css {
                                +HeaderStyles.badge
                            }
                        }
                    ) {
                        attrs {
                            anchorOriginHorizontal = MBadgeAnchorOriginHorizontal.right
                            anchorOriginVertical = MBadgeAnchorOriginVertical.bottom
                        }
                        mAvatar {
                            attrs {
                                alt = props.user.name
                                src = props.user.thumbnail
                            }
                        }
                    }
                } else {
                    mAvatar {
                        attrs {
                            alt = props.user.name
                            src = props.user.thumbnail
                        }
                    }
                }
            }
            mListItemText (
                primary = props.user.name,
                secondary = props.user.location
            )
        }