Adding a dashicon using custom HTML
layout icon
<p><span class="dashicons dashicons-layout" style="color:red;width:100px;"></span> layout icon</p>And add this to functions.php
add_action( 'wp_enqueue_scripts', 'load_dashicons_front_end' );
function load_dashicons_front_end() {
wp_enqueue_style( 'dashicons' );
}Block Icon file
functions.php > require get_theme_file_path(‘/components/block-icon/block-icon.php’);
‘The Icon Block’ Plugin
Plain Fonts
★★★
‘SVG Block’ Plugin
SVG in an Image Block
You can then color the image by applying a class like .svg-black
.svg-black img {
filter: brightness(0) invert(0);
}
.green-svg img {
filter: invert(34%) sepia(8%) saturate(3470%) hue-rotate(91deg) brightness(100%) contrast(81%);
}