Angular Material nested optgroups

After reading this SO question I found that it isn't possible to have nested optgroups as it's not part of the HTML5 spec. It is possible to apply styles yourself, but I would rather avoid that if it's possible in angular material.

"Under the hood" angular material swaps a lot of elements for divs and applies custom styling. Which makes me think they might handle this situation.

If I have the following code, I would expect the md-optgroup with label="Second level deep" to be indented further.

Plunker

<md-input-container>
    <md-select ng-model="vm.someModel">
        <md-optgroup label="One level deep">
            <md-option>
                One level deep
            </md-option>
        </md-optgroup>
        <md-optgroup label="Another group">
            <md-optgroup label="Second level deep">
                <md-option>Two levels deep</md-option>
            </md-optgroup>
        </md-optgroup>
    </md-select>
</md-input-container>

However, all md-optgroups are not indented and displayed the same.

This is how it currently looks:

I can't see anything in the demos or docs about this (in fact they they don't have any docs for md-optgroup at all), but the docs can sometimes be out of date/incomplete.

Is it possible to have nested option groups with different indentation?

If not, what is the best way to achieve this using what is available in angular material? Should I use flex etc.

I'm trying to achieve something like this: