Skip to content

Including icons

Currently, PDFerret supports the following icons:

  1. Material Design Icons (mdi)
  2. Material Symbols & Icons, as a Google Font

Using Material Design Icons (mdi)

To include Material Design Icons in your report, go to the Options section of your template and select Material Design Icons in the Icons menu.

Then, you can use the icons in your template by creating a span tag with the class mdi and the name of the icon you want to use.

Here is an example of how to include the mdi-account icon in your template:

<span class="mdi mdi-account"></span>

You can browse the full list of Material Design Icons at https://pictogrammers.com/library/mdi/.

Using Material Symbols & Icons

Material Symbols & Icons is a Google Font that includes a wide range of icons that you can use in your documents. You can browse and customize the appearance of these icons at https://fonts.google.com/icons. This customization is then reflected in the URL of the font to be included in your template.

Example

The following URL is for the Material Symbols in Sharp style, with an optical size of 24px, a weight of 400, no fill, and a grade of 0.

https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@24,400,0,0

To include Material Symbols & Icons in your report, go to the CSS section of your template and include the font you want to use with the @import rule. Then, you can use the icons in your template by creating a span tag with the class material-icons and the name of the icon you want to use.

Here is an example of how to include the material-icons font, and apply it to the body tag of your template:

@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@24,400,0,0');

Then, you can use the icons in your template by creating a span tag with the class material-icons and the name of the icon you want to use.

Here is an example of how to include the home icon in your template:

<span class="material-symbols-sharp">home</span>

Tip

Notice that the name of the icon is suffixed with the name of the font style you are using, in this case, sharp. If this is not right, the icon will not be displayed.