<template functional>
  <span :aria-hidden="props.decorative"
        :aria-label="props.title"
        :class="[data.class, data.staticClass]"
        class="material-design-icon ambulance-icon"
        role="img"
        @click="listeners.click ? listeners.click : () => true">
    <svg :fill="props.fillColor"
         class="material-design-icon__svg"
         :width="props.size"
         :height="props.size"
         viewBox="0 0 24 24">
      <path d="M18,18.5C18.83,18.5 19.5,17.83 19.5,17C19.5,16.17 18.83,15.5 18,15.5C17.17,15.5 16.5,16.17 16.5,17C16.5,17.83 17.17,18.5 18,18.5M19.5,9.5H17V12H21.46L19.5,9.5M6,18.5C6.83,18.5 7.5,17.83 7.5,17C7.5,16.17 6.83,15.5 6,15.5C5.17,15.5 4.5,16.17 4.5,17C4.5,17.83 5.17,18.5 6,18.5M20,8L23,12V17H21C21,18.66 19.66,20 18,20C16.34,20 15,18.66 15,17H9C9,18.66 7.66,20 6,20C4.34,20 3,18.66 3,17H1V6C1,4.89 1.89,4 3,4H17V8H20M8,6V9H5V11H8V14H10V11H13V9H10V6H8Z">
        <title>{{ props.title }}</title>
      </path>
    </svg>
  </span>
</template>

<script>
export default {
  name: "AmbulanceIcon",
  props: {
    title: {
      type: String,
      default: "Ambulance icon"
    },
    decorative: {
      type: Boolean,
      default: false
    },
    fillColor: {
      type: String,
      default: "currentColor"
    },
    size: {
      type: Number,
      default: 24
    }
  }
}
</script>