Ionic 2: Remove background from custom component button in navbar

Question

Q) How do I fix the styling on the custom component below so it looks like the plus sign, with inherited styling from the <ion-buttons> directive?

I'm using a custom component in my navbar: <notifications-bell></notifications-bell>, like so:

<ion-navbar *navbar header-colour>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>  
  <ion-buttons end>
    <notifications-bell></notifications-bell>
    <button>
      <ion-icon name="add"></ion-icon>
    </button>
  </ion-buttons>  
  <ion-title>Clients</ion-title>
</ion-navbar>

But it's rendering with a background colour:

Here's my component:

import {Component} from 'angular2/core';

@Component({
    selector: 'notifications-bell',
    directives: [],
    template: `<button><ion-icon name="notifications-outline"></ion-icon></button>`
})
export class NotificationsBellComponent {
    constructor() {
    }
}

Thanks.

Answer 1

I'd assume it's as simple as removing background and shadow?

button{
  background: none !important;
  background-color: none !important;
  box-shadow: none !important;
}