HELLOPANDA MANUAL

Icon Block / Font Icon

home grade science signal_cellular_alt turn_sharp_right

01

Icon Block (Google Font)

hellopanda WP manual

google font
Material Symbols

Hellopanda theme adopts Google Material Icon as the icon font. It is one of the most trusted Google services.

Material Symbol is a modern icon that integrates over 3,271 glyphs into a single font file with many design variations. Symbols are available in three styles and four adjustable variable font styles (fill, weight, grade, and optical size).

Since the CSS is loaded through a CDN, there may be a difference in speed depending on the status of Google’s server, but since it is a font that is widely used, it is likely to be cached on the user’s computer, so it is likely to be faster than any other CDN in terms of speed.

The options in use are Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0. Depending on the version, the icon may not appear, but it is best to assume that this rarely happens.

1.

Run the block editor.

2.

Select the Block Inserter toggle.

3.

Select Icon Block from the Hellopanda category.

4.

When an empty icon block is created, select the block.

Then check the design block editing panel opened on the right side of the screen.

5.

You can select a recommended icon and set the icon size.
The icon size is in em units (a unit that inherits the parent font size) and can be entered in decimal units.

If you want to see more iPhone fonts

You can visit this link to see the full list of Google Fonts.
Please refer to the image below to get the icon code.

Enter the code you obtained into the code input box and the desired icon will be inserted.

02

SVG icon block (external plugin)

hellopanda WP manual

The Icon Block

SVG icons can be inserted through external plugins.

You can check the plugin in the plugin list. If you do not want to use this feature, you can disable the plugin. However, because the plugin itself is lightweight and highly extensible, the Hellopanda theme recommends the installation of this plugin.

This plugin is highly extensible, but the icons it provides are extremely limited. However, the biggest advantage is that you can insert any icon you want because you can directly enter SVG code.

If you are an expert, you can create a much richer UI/UX by using a combination of basic icon blocks and this plugin.

PLUGIN INTRODUCE

GUIDE HOME