{% extends "pxy_dashboard/partials/base.html" %} 
{% load static %} 

{% block title %}Material Symbols{% endblock title %} 

{% block extra_css %} 
{% endblock extra_css %} 


{% block pagetitle %}
{% include "pxy_dashboard/partials/page-title.html" with pagetitle="Icons" title="Material Symbols" %}
{% endblock pagetitle %}

{% block content %} 
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-body">
                <h4 class="header-title mb-4">All Icons<a class="badge badge-soft-primary ms-2" href="https://fonts.google.com/icons" target="_blank">Google Icon</a></h4>
                <div class="d-flex align-items-center gap-3 mb-4">
                    <i class="material-symbols-outlined">home</i>
                    <span>home</span>
                    <code> .material-symbols-outlined </code>
                </div>

                <div class="d-flex align-items-center gap-3 mb-4">
                    <i class="material-symbols-outlined fill-1">home</i>
                    <span>home</span>
                    <code> .material-symbols-outlined .fill-1</code>
                </div>
                <div class="row icons-list-demo" id="icons"> </div>
            </div> <!-- end card-body -->
        </div> <!-- end card -->
    </div>
</div>

{% endblock content %} 

{% block extra_js %} 
   

    <!-- Remixicons Icons Demo js -->
    <script src="{% static 'dashboard/js/pages/demo.material-symbol.js' %}"></script>

    <!-- App js -->
    <script src="{% static 'dashboard/js/app.min.js' %}"></script>
{% endblock extra_js %}

