{% macro media_icon(media_type, size='1.5rem', extra_class='') %}
<svg class="media-icon{{ ' ' + extra_class if extra_class }}"
     viewBox="0 0 24 24" aria-hidden="true"
     style="width:{{ size }};height:{{ size }};flex-shrink:0">
  {% if media_type == 'book' %}
  <path fill="var(--cmp-glyph-body)" fill-opacity=".15"
        d="M5 3h12a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"/>
  <path fill="none" stroke="var(--cmp-glyph-body)" stroke-width="1.5"
        stroke-linecap="round" stroke-linejoin="round"
        d="M5 3h12a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1zM8.5 3v18"/>
  <path fill="none" stroke="var(--cmp-glyph-body)" stroke-width="1" stroke-linecap="round"
        d="M11 8h5M11 12h5M11 16h4"/>
  {% elif media_type == 'vinyl' %}
  <circle cx="12" cy="12" r="9" fill="var(--cmp-glyph-body)" fill-opacity=".15"/>
  <circle cx="12" cy="12" r="9" fill="none" stroke="var(--cmp-glyph-body)" stroke-width="1.5"/>
  <circle cx="12" cy="12" r="5" fill="none" stroke="var(--cmp-glyph-body)" stroke-width="1"/>
  <circle cx="12" cy="12" r="2" fill="none" stroke="var(--cmp-glyph-body)" stroke-width="1"/>
  <circle cx="12" cy="12" r=".8" fill="var(--cmp-glyph-body)"/>
  {% elif media_type == 'cd' %}
  <circle cx="12" cy="12" r="9" fill="var(--cmp-glyph-body)" fill-opacity=".15"/>
  <circle cx="12" cy="12" r="9" fill="none" stroke="var(--cmp-glyph-body)" stroke-width="1.5"/>
  <circle cx="12" cy="12" r="3.5" fill="none" stroke="var(--cmp-glyph-body)" stroke-width="1.5"/>
  {% elif media_type in ('dvd', 'bluray') %}
  <circle cx="12" cy="12" r="9" fill="var(--cmp-glyph-body)" fill-opacity=".15"/>
  <circle cx="12" cy="12" r="9" fill="none" stroke="var(--cmp-glyph-body)" stroke-width="1.5"/>
  <circle cx="12" cy="12" r="3.5" fill="none" stroke="var(--cmp-glyph-body)" stroke-width="1.5"/>
  <circle cx="12" cy="12" r="1.2" fill="var(--cmp-glyph-body)"/>
  {% elif media_type == 'vhs' %}
  <rect x="2" y="5" width="20" height="14" rx="2"
        fill="var(--cmp-glyph-body)" fill-opacity=".15"/>
  <rect x="2" y="5" width="20" height="14" rx="2"
        fill="none" stroke="var(--cmp-glyph-body)" stroke-width="1.5" stroke-linejoin="round"/>
  <line x1="2" y1="11" x2="22" y2="11" stroke="var(--cmp-glyph-body)" stroke-width="1"/>
  <circle cx="8" cy="15.5" r="2.2" fill="none" stroke="var(--cmp-glyph-body)" stroke-width="1"/>
  <circle cx="16" cy="15.5" r="2.2" fill="none" stroke="var(--cmp-glyph-body)" stroke-width="1"/>
  <rect x="9.5" y="5" width="5" height="4" rx=".5"
        fill="none" stroke="var(--cmp-glyph-body)" stroke-width="1"/>
  {% else %}
  <path fill="var(--cmp-glyph-body)" fill-opacity=".15"
        d="M12 2L2 7v10l10 5 10-5V7L12 2z"/>
  <path fill="none" stroke="var(--cmp-glyph-body)" stroke-width="1.5"
        stroke-linecap="round" stroke-linejoin="round"
        d="M12 2L2 7v10l10 5 10-5V7L12 2z"/>
  <path fill="none" stroke="var(--cmp-glyph-body)" stroke-width="1" stroke-linecap="round"
        d="M2 7l10 5M22 7l-10 5M12 12v10"/>
  {% endif %}
</svg>
{% endmacro %}