Ion-tab-button custom component for reuse

I am making a reusable component, based on ion-tab-button and I have created a new angular component with @Component.
All works well except for the styling when this is placed inside an ion-tab-bar. The reason for this is that my new components tags are placed “in-between” ion-tab-bar and ion-tab-button. The resulting HTML looks something like:


instead of the normal


And it brakes the layout styling.

I have tried to add styling to my component but it has not worked so far…
Any ideas or suggestions about how to get around this, if at all possible?
A small test project illustrating the issue is available here

Sorted this by inspecting the css properties on the ion-tab-button component and re-applying them to my new component. Also making sure that the contained button fills 100% of the new component.

:host {
    max-width: 168px;
    height: 100%;
    flex: 1 1 0;

    ion-tab-button {
        width: 100%;

There is still one issue and with the max-width; it isn’t the same on all devices + platform combination as far as I can tell e.g. the tab button is a bit larger on an iPad.
One could try to apply some media query to try to sort that out

@media (min-width: 1200px) {
        max-width: 240px;