Add icon to DetailsList in fluent UI React

Question

I am trying to add icon to my DetailsList. this is my code. But its nothing visible. I need to add recycle Bin Icon here. Now i just added sample icon. But not visible anything.

 {
  key: "BinIcon",
  fieldName: "delete",
  minWidth: 16,
  maxWidth: 16, 
  onRender: (selectedItems) => <img src={"http://s.cdpn.io/3/kiwi.svg"} />,
},

Answer 1

Here you go for a class component. Function Component would be similar..

const classNames = mergeStyleSets({
    fileIconHeaderIcon: {
        padding: 0,
        fontSize: '16px',
    },
    fileIconCell: {
        textAlign: 'center',
        selectors: {
            '&:before': {
                content: '.',
                display: 'inline-block',
                verticalAlign: 'middle',
                height: '100%',
                width: '0px',
                visibility: 'hidden',
            },
        },
    },
    fileIconImg: {
        verticalAlign: 'middle',
        maxHeight: '16px',
        maxWidth: '16px',
    },...




//primary entity grid columns
const columns: IColumn[] = [
    {
        key: 'column1',
        name: 'Icon',
        className: classNames.fileIconCell,
        iconClassName: classNames.fileIconHeaderIcon,
        ariaLabel: 'Items',
        iconName: 'Page',
        isIconOnly: true,
        fieldName: 'name',
        minWidth: 16,
        maxWidth: 16,
        onColumnClick: this._onColumnClick,
        onRender: (item: ISegment) => (
            <TooltipHost content={`${item.Uid} (item id)`}>
                <img src={itemIcon} className={classNames.fileIconImg} alt={`${item.Uid} item`} />
            </TooltipHost>
        ),
    },
    {...

OR refer more icons here: https://blog.lsonline.fr/fluent-ui-core-icons/ https://developer.microsoft.com/en-us/fluentui#/controls/web/icon

    const columns: IColumn[] = [
        {
            key: 'column1',
            name: 'Icon',
            className: classNames.fileIconCell,
            iconClassName: classNames.fileIconHeaderIcon,
            ariaLabel: 'Items',
            iconName: 'Page',
            isIconOnly: true,
            fieldName: 'name',
            minWidth: 16,
            maxWidth: 16,
            onColumnClick: this._onColumnClick,
            onRender: (item: IBusiness) => (
                <TooltipHost content={`${item.Uid} (item id)`}>
                    <FontIcon aria-label="Item" iconName="BusinessCenterLogo" className={classNames.fileIconImg} />
                </TooltipHost>
            ),
        },