Override padding for mat tree

Question

I am using this example here to build a mat-tree using a flat datasource. Now I want to override the default padding-left which is 40px for all the following children. This is how I am doing it:

mat-tree-node:not(:first-child) {
    padding-left: 16px;
}

This works, but only sets 16px padding on the level 2 of the tree nodes. The rest of the nested children do not accumulate the 16px as I keep on expanding them. Is it possible to override matTreeNodePadding directive?

Answer 1

I was able to use the api documentation here to resolve the issue. Had to pass in the selector input for matTreeNodePadding indentation in this case.

<mat-tree-node matTreeNodePadding matTreeNodePaddingIndent="20">

This would override the existing default 40px left padding to 20px.