Use individual icons

<template>
	<About class="app-icon" aria-label="About" role="img" />
	<Dashboard class="app-icon" aria-hidden="true" />
	<Page404 class="empty-state" aria-label="Page not found" role="img" />
</template>

<script setup lang="ts">
import { About, Dashboard, Page404 } from "@fast-element-plus/icons-vue";
</script>

<style scoped>
.app-icon {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.empty-state {
	width: 20rem;
	height: auto;
}
</style>

Most single-color icons can follow text color through fill: currentColor. Authored fills in multicolor illustrations such as Page403 and Page404 take precedence on their child elements.

Decorative icons should use aria-hidden="true". Meaningful standalone icons should receive an accessible name, normally through aria-label and role="img".