vaadin-text-field not applying material design.

I’m using vaadin 12 and writing custom polymer components.

On my main layout I have @Theme(Material.class)

I have a component that has a vaadin-button and a vaadin-text-field.

The vaadin-button is being correctly themed however the vaadin-text-field is not been themed.

If I change my text field import from:

<link rel="import" href="/frontend/bower_components/vaadin-text-field/src/vaadin-text-field.html">


<link rel="import" href="/frontend/bower_components/vaadin-text-field/theme/material/vaadin-text-field.html">

Then the text field is correctly themed but this seems wrong.

The component:

<link rel="import"

<link rel="import"

<link rel="import"

<dom-module id="reg-business-name"> <template>
<style include="shared-styles">

	<p>Business Name</p>
	<vaadin-button theme="contained">hi</vaadin-button>
	<vaadin-text-field label="Business Name"
		placeholder="Enter your business name"></vaadin-text-field>
</template> <script>
        class BusinessName extends Polymer.Element {
            static get is() {
                return 'reg-business-name';

            static get properties() {
                return {
                    // Declare your properties here.
        customElements.define(, BusinessName);
    </script> </dom-module>