Customize the header actions

[tadam75]

Hello,

In our project, we would like to customize the header actions :

• On a primary action, we'd like the possibility to display a list of actions on click
• We'd like to change the color of buttons

[TomGallon]

to chance button css please overload like this:

[data-focus='header-actions'] .mdl-button--fab {
    background-color: #a71818;
}

to define list of action in a primary button, dispatch actions this way:

connectToHeader({
        actions: {
            primary: [
                {icon: 'edit', label: 'test', shape: 'fab'},
                {icon: 'edit', label: 'test', shape: 'fab', action:
                    [
                        {icon: 'edit', label: 'test', shape: 'fab', action: () => console.log('toto')},
                        {icon: 'edit', label: 'test', shape: 'fab', action: () => console.log('toto')}
                    ]
                },
            ],
            secondary: [{icon: 'edit', label: 'test', shape: 'fab'},]
        },
        ExpandedHeaderComponent: SearchHeader,
        SummaryHeaderComponent: SearchHeader,
        LeftHeaderComponent: DemoTitle
    })