{% extends 'partials/layout-vertical.html.twig' %}

{% block title %}{% endblock %}

{% block css %}{% endblock %}

{% block pagetitle %}
	{{ include('partials/page-title.html.twig', { sub_title: 'Icons', page_title: 'Material Symbols' }) }}
{% endblock %}

{% block body %}
<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 %}

{% block javascript %}
<!-- Remixicons Icons Demo js -->
<script src="/js/pages/demo.material-symbol.js"></script>
{% endblock %}
