<template>
  <span v-bind="$attrs"
        :aria-hidden="!title ? true : null"
        :aria-label="title ? true : null"
        class="material-design-icon office-building-cog-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="M16 13C15.87 13 15.76 13.09 15.74 13.21L15.55 14.53C15.25 14.66 14.96 14.82 14.7 15L13.46 14.5C13.35 14.5 13.22 14.5 13.15 14.63L12.15 16.36C12.09 16.47 12.11 16.6 12.21 16.68L13.27 17.5C13.25 17.67 13.24 17.83 13.24 18S13.25 18.33 13.27 18.5L12.21 19.32C12.12 19.4 12.09 19.53 12.15 19.64L13.15 21.37C13.21 21.5 13.34 21.5 13.46 21.5L14.7 21C14.96 21.18 15.24 21.35 15.55 21.47L15.74 22.79C15.76 22.91 15.86 23 16 23H18C18.11 23 18.22 22.91 18.24 22.79L18.43 21.47C18.73 21.34 19 21.18 19.27 21L20.5 21.5C20.63 21.5 20.76 21.5 20.83 21.37L21.83 19.64C21.89 19.53 21.86 19.4 21.77 19.32L20.7 18.5C20.72 18.33 20.74 18.17 20.74 18S20.73 17.67 20.7 17.5L21.76 16.68C21.85 16.6 21.88 16.47 21.82 16.36L20.82 14.63C20.76 14.5 20.63 14.5 20.5 14.5L19.27 15C19 14.82 18.73 14.65 18.42 14.53L18.23 13.21C18.22 13.09 18.11 13 18 13H16M17 16.5C17.83 16.5 18.5 17.17 18.5 18S17.83 19.5 17 19.5C16.16 19.5 15.5 18.83 15.5 18S16.17 16.5 17 16.5M16 11.08V3H2V21H8V17.5H10.03C10.26 14.2 12.77 11.54 16 11.08M6 19H4V17H6V19M6 15H4V13H6V15M6 11H4V9H6V11M6 7H4V5H6V7M12 5H14V7H12V5M12 9H14V11H12V9M10 15H8V13H10V15M10 11H8V9H10V11M8 7V5H10V7H8Z">
        <title v-if="title">{{ title }}</title>
      </path>
    </svg>
  </span>
</template>

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