<template>
  <span v-bind="$attrs"
        :aria-hidden="!title ? true : null"
        :aria-label="title ? true : null"
        class="material-design-icon airplane-settings-icon"
        role="img"
        @click="$emit('click', $event)">
    <svg :fill="fillColor"
         class="material-design-icon__svg"
         :width="size"
         :height="size"
         viewBox="0 0 24 24">
      <path d="M20.09 4.56L16.2 8.45L18.32 17.64L16.91 19.06L13 11.63L9.13 15.5L9.5 18L8.42 19.06L6.65 15.87L3.47 14.11L4.53 13.04L7 13.4L10.9 9.5L3.47 5.62L4.89 4.21L14.08 6.33L17.97 2.44C18.55 1.85 19.5 1.85 20.09 2.44C20.68 3 20.68 3.97 20.09 4.56M7 24H9V22H7V24M11 24H13V22H11V24M15 24H17V22H15V24Z">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

<script>
export default {
  name: "AirplaneSettingsIcon",
  emits: ['click'],
  props: {
    title: {
      type: String,
    },
    fillColor: {
      type: String,
      default: "currentColor"
    },
    size: {
      type: Number,
      default: 24
    }
  }
}
</script>