<template><svg aria-hidden="true" :fill="color" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="20px" height="20px"><g clip-path="url(#media_thumb-down_20__a)"><path d="M9.223 17.52a2.362 2.362 0 0 1-3.849-2.694l.874-1.574H4.167a2.417 2.417 0 0 1-2.362-2.923l.817-3.818.006-.026c.098-.392.186-.762.277-1.064.094-.31.213-.622.412-.902.427-.6 1.08-.863 1.94-1.078a.8.8 0 0 1 .182-.022h5l.12.01q.06.009.117.028l1.543.514a.75.75 0 0 1 .72-.552h2.917a.75.75 0 0 1 .743.638l1.25 8.333a.75.75 0 0 1-.743.862h-4.184zM15.21 4.918h-1.52v6.833h2.545zM6.829 16.582a.863.863 0 0 0 1.26-.045l4.1-4.73V5.543l-1.873-.625H5.537c-.734.19-.906.342-.997.47-.061.085-.124.217-.2.466-.077.257-.147.56-.257.996l-.813 3.792a.917.917 0 0 0 .897 1.109h3.355a.744.744 0 0 1 .653 1.113h.004l-1.494 2.69a.86.86 0 0 0 .144 1.027Z"/></g><defs><clipPath id="media_thumb-down_20__a"><path fill="#fff" d="M0 0h20v20H0z"/></clipPath></defs></svg></template>
<script setup lang="ts">
/**
 * ThumbDown20 is an SVG icon wrapped in a Vue component to make it easier to use.
 */
withDefaults(
  defineProps<{
    /**
     * Define the color of the icon.
     */
    color?: string;
  }>(),
  {
    color: 'currentColor',
  },
);
</script>
