In Ember how can I have different html in a component used in multiple places?

I'm trying to make a dropdown component that can have different HTML in the heading/title. I have this so far:

component:

App.TestShowComponent = Ember.Component.extend({
  layoutName: "components/test-show",
  expanded: false,
  actions: {
    toggle: function () {
      this.set('expanded', !this.get('expanded'));
    }
  }
});

index template:

{{#test-show}}
  inner stuff
{{/test-show}}

component template:

<button {{action 'toggle'}}>toggle</button>
{{#if expanded}}
  {{yield}}
{{/if}}

But what I need is for the heading markup where the button is, I'd like that to be able to be passed in somehow so that I can use different markup for the headings of different dropdowns on the page. For example the heading of one dropdown may be an image and then somewhere else on the page I use the component again but this time with the heading as a button.

Is this possible or would I have to make separate components like {{button-dropdown}} and {{image-dropdown}}