{% extends "demo_app/pattern_base.html" %}

{% block component_content %}
<h1 class="font-heading-2xl">{{ component_name }}</h1>
<p class="usa-intro">Icons help communicate meaning, actions, status, or feedback.</p>

<h2 class="font-heading-xl margin-top-4">Common icons</h2>
<div class="display-flex flex-row flex-gap-2 flex-align-center flex-wrap">
    <c-icon icon="check" />
    <c-icon icon="close" />
    <c-icon icon="navigate_next" />
    <c-icon icon="navigate_before" />
    <c-icon icon="arrow_upward" />
    <c-icon icon="arrow_downward" />
    <c-icon icon="search" />
    <c-icon icon="settings" />
    <c-icon icon="lock" />
    <c-icon icon="mail" />
    <c-icon icon="phone" />
    <c-icon icon="people" />
    <c-icon icon="schedule" />
    <c-icon icon="warning" />
    <c-icon icon="info" />
    <c-icon icon="error" />
    <c-icon icon="help" />
    <c-icon icon="visibility" />
    <c-icon icon="visibility_off" />
    <c-icon icon="file_download" />
    <c-icon icon="file_upload" />
    <c-icon icon="print" />
    <c-icon icon="edit" />
    <c-icon icon="delete" />
</div>

<h2 class="font-heading-xl margin-top-4">Sizes</h2>
<div class="display-flex flex-row flex-gap-2 flex-align-center">
    <c-icon icon="check_circle" class="usa-icon--size-3" />
    <c-icon icon="check_circle" class="usa-icon--size-4" />
    <c-icon icon="check_circle" class="usa-icon--size-5" />
    <c-icon icon="check_circle" class="usa-icon--size-6" />
    <c-icon icon="check_circle" class="usa-icon--size-7" />
    <c-icon icon="check_circle" class="usa-icon--size-8" />
    <c-icon icon="check_circle" class="usa-icon--size-9" />
</div>
{% endblock %}