I spent a lot of time to make it work because I didn’t find detailed instructions, so I show my example.
It’s interface for TV control (esp8266 and MQTT).
Unfortunately, I have not been able to understand how to get rid of the pop-up window when tap on the button, event.stopPropagation() and in-dialog=“false” don’t help 
My version Home Assistant 0.74.0.
configuration.yaml
homeassistant:
customize: !include customize.yaml
frontend:
extra_html_url:
- /local/custom_ui/state-card-custom-ui.html
- /local/custom_ui/state-card-custom-tv.html
extra_html_url_es5:
- /local/custom_ui/state-card-custom-ui-es5.html
customize.yaml
switch.kitchen_tv:
icon: mdi:television
friendly_name: "TV"
mqtt_topic: "kitchen/tv/command"
custom_ui_state_card: state-card-custom-tv
scripts.yaml
control_tv:
alias: Control TV
sequence:
- data_template:
payload: "{{ command }}"
topic: "{{ mqtt_topic }}"
service: mqtt.publish
switches.yaml
- platform: mqtt
command_topic: "-"
name: kitchen_tv
/home/homeassistant/.homeassistant/www/custom_ui/state-card-custom-tv.html
<dom-module id="state-card-custom-tv">
<template>
<style is="custom-style" include="iron-flex iron-flex-alignment"></style>
<style>
:host {
line-height: 1.5;
}
paper-button {
min-width: 50px;
height: 50px;
margin: 2px 0 0;
background-color: #252525;
}
paper-button-group {
text-align: right;
}
state-info {
min-width: 80px !important;
}
</style>
<div class='horizontal justified layout'>
<state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
<paper-button-group in-dialog='[[inDialog]]'>
<paper-button in-dialog='[[inDialog]]' on-tap="power">
<svg style="width:24px; height:24px" viewBox="0 0 24 24">
<path fill="#848484" d="M13,3H11V13H13V3M17.83,5.17L16.41,6.59C18.05,7.91 19,9.9 19,12A7,7 0 0,1 12,19C8.14,19 5,15.88 5,12C5,9.91 5.95,7.91 7.58,6.58L6.17,5.17C2.38,8.39 1.92,14.07 5.14,17.86C8.36,21.64 14.04,22.1 17.83,18.88C19.85,17.17 21,14.65 21,12C21,9.37 19.84,6.87 17.83,5.17Z" /></svg>
</paper-button>
<paper-button in-dialog='[[inDialog]]' on-tap="programDown">
<svg style="width:24px; height:24px" viewBox="0 0 24 24">
<path fill="#848484" d="M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4M7,10L12,15L17,10H7Z" /></svg>
</paper-button>
<paper-button in-dialog='[[inDialog]]' on-tap="programUp">
<svg style="width:24px; height:24px" viewBox="0 0 24 24">
<path fill="#848484" d="M12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M17,14L12,9L7,14H17Z" /></svg>
</paper-button>
<paper-button in-dialog='[[inDialog]]' on-tap="volumeMute">
<svg style="width:24px; height:24px" viewBox="0 0 24 24">
<path fill="#848484" d="M12,4L9.91,6.09L12,8.18M4.27,3L3,4.27L7.73,9H3V15H7L12,20V13.27L16.25,17.53C15.58,18.04 14.83,18.46 14,18.7V20.77C15.38,20.45 16.63,19.82 17.68,18.96L19.73,21L21,19.73L12,10.73M19,12C19,12.94 18.8,13.82 18.46,14.64L19.97,16.15C20.62,14.91 21,13.5 21,12C21,7.72 18,4.14 14,3.23V5.29C16.89,6.15 19,8.83 19,12M16.5,12C16.5,10.23 15.5,8.71 14,7.97V10.18L16.45,12.63C16.5,12.43 16.5,12.21 16.5,12Z" /></svg>
</paper-button>
<paper-button in-dialog='[[inDialog]]' on-tap="volumeDown">
<svg style="width:24px; height:24px" viewBox="0 0 24 24">
<path fill="#848484" d="M3,9H7L12,4V20L7,15H3V9M14,11H22V13H14V11Z" /></svg>
</paper-button>
<paper-button in-dialog='[[inDialog]]' on-tap="volumeUp">
<svg style="width:24px; height:24px" viewBox="0 0 24 24">
<path fill="#848484" d="M3,9H7L12,4V20L7,15H3V9M14,11H17V8H19V11H22V13H19V16H17V13H14V11Z" /></svg>
</paper-button>
</paper-button-group>
</div>
</template>
</dom-module>
<script>
Polymer({
is: 'state-card-custom-tv',
properties: {
hass: {
type: Object,
},
inDialog: {
type: Boolean,
value: false,
},
stateObj: {
type: Object,
},
},
power: function (event) {
this.sendCommand(event, '0');
},
programDown: function (event) {
this.sendCommand(event, '5');
},
programUp: function (event) {
this.sendCommand(event, '4');
},
volumeMute: function (event) {
this.sendCommand(event, '3');
},
volumeDown: function (event) {
this.sendCommand(event, '2');
},
volumeUp: function (event) {
this.sendCommand(event, '1');
},
sendCommand(event, command) {
this.hass.callService('script', 'control_tv', {
mqtt_topic: this.stateObj.attributes.mqtt_topic,
command: command
});
event.stopPropagation();
},
});
</script>
