This is very useful - I note that 1 year on - these are still not documented!

I have found a slight wrinkle. When using the button/icon dynamically (i.e. generating and rendering the required html) you need to use kebab case "component-name" instead of camel case "componentName".

We are using a 3rd-party component - which generates the view and is able to "render" the data using

{ id: "assignment_group", header: [{ text: "Assignment Group" }]
    htmlEnable: true,
    template: function(cellValue, row, col) {
        return `<now-button 
                  label="${cellValue.name}" 
                  variant="inherit" 
                  size="sm" 
                  bare="true" 
                  component-name="assignGroup-${row.id}"></now-button>`
    }
}

This produces a clickable button with the correct icon and when the button/icon is clicked the "componentName" is now provided

Ideally I would be able to get the row id via payload (rather than needing to parse the componentName) but I do not know if any similar approach could apply to the "append-to-payload" option - my suspicion is that as this is kebab-case already some differing processing is applied to it.