Configuring Custom Icons

Itz TxS

June 26, 2023

---

Fine Metarial uses SVG icons with a Material Design theme. There are several advantages to SVG icons, including scalability, SEO friendly, editability, and resolution independent. Therefore, the future of SVG looks bright and the trend of using SVG will continue to increase.

Here are some advantages of using SVG icons:

It won't blur and won't break when enlarged.
It won't blur and won't break when the resolution is enlarged.
Image quality will be maintained.
May make website loading faster.
Perfect for responsive design, as the quality stays sharp on all devices.

List of contents

How to Get SVG Icons

Follow these steps.

You should visit the Iconer website. There you can select different types of SVG icons, which will be coded for use.

Select one of the available icon menus, for example, select the icon menu from Feather Icons.

Click Open in App.

In the Right sidebar set the option value for Stroke Width to 1.

Search for the SVG icon according to your needs, then click the SVG icon and the code will be copied automatically. Example like the Download icon code below.

HTML

<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" viewBox= "0 0 24 24" xmlns="http://www.w3.org/2000/svg">
   <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
   <path d="m7 10 5 5 5-5"></path>
   <path d="M12 15V3"></path>
</svg>

Just take the path part, for example like below.

HTML

<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
<path d="m7 10 5 5 5-5"></path>
<path d="M12 15V3"></path>

How to Install SVG Icons

Follow these steps.

Go to Blogger Dashboard > select Layout.

Search for the section entitled Finemetarial PANEL.

Click the edit button (pencil icon) in Custom SVG Icons (Gadget List).

Widget configuration pop up will appear.

In the Title column leave the default.

In column Number of items to appear in the list leave blank.

In column Sort leave default.

In Text List section, click the ADD NEW ITEM button.

In the Text column, fill in the format like the example below.

HTML

<symbol id='Download' viewbox='0 0 24 24'>
   <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
   <path d="m7 10 5 5 5-5"></path>
   <path d="M12 15V3"></path>
</symbol>

In the id='Download' section replace the text Download with the name Label.
In the code section path replace with the path code taken from previous step.

If already configured click the SAVE button on the right.

When everything is configured, click the SAVE button below.

If you want to report some bugs, you can write them in the comments section of the page Report a Bug and if you If you want to request a new feature or want to provide feedback, please write in the comments section on the page Request and Feedback.

Fine Metarial

Configuring Custom Icons

How to Get SVG Icons

How to Install SVG Icons

Itz TxS

Oops! No Internet!

Cookies Consent