Navbar custom component not displayed correctly menu page

Am trying to make a custom component that handles a navbar that I will be using in many pages that are accessible through a menu., this component has three ion icons inside buttons, however when I put the HTML code in a component.html and use that component selector in the page HTML, the icons are not displayed even though they’re there because I can press them. However if I put the code directly in the page HTML, it works correctly.

Here’s my shared components module

import { TestNavbarComponent } from './test-navbar/test-navbar';
import { NgModule } from '@angular/core';
import { IonicModule } from 'ionic-angular';
import { BalanceComponent } from './balance/balance';
import { TranslateLoader, TranslateModule } from '@ngx-translate/core';

	declarations: [BalanceComponent, TestNavbarComponent],
	imports: [TranslateModule.forChild(),
	exports: [BalanceComponent, TestNavbarComponent]
export class ComponentsModule { }

Here’s my component HTML

<button ion-button icon-only menuToggle>
  <ion-icon [name]="menuIcon"></ion-icon>


    <button ion-button icon-only class="pink">
<ion-icon [name]="menuIcon ? 'menu' : 'close'"></ion-icon>

<ion-buttons right>
  <button ion-button icon-only>
<ion-icon name="menu"></ion-icon>

And here’s what happens if I use component vs page HTML

I think the problem is from the IonicModule.forRoot(TestNavbarComponent) but I can’t use ionic components if I don’t.

As far as I know ion-navbar doesn’t like being encapsulated in a component. CSS and functionality goes missing.

Is there a way to fix that? Or should I just repeat the code in each individual page?

Is there a reason you can’t put it in app.html?

Not sure what you mean, I have a few pages before the menu page, and I want to reuse the component on some of the pages not all of the application.