Configuring Custom Icons and Icon Packs in Materia X2 Theme

Custom Icons and Icon Packs configuration in the Materia X2 theme.
Yasya El Hakim

Configuring Custom Icons and Icon Packs in Materia X2 Theme

Materia X2 uses SVG icons with a Material Design theme. There are several advantages of Icon SVG, including scalability, SEO friendly, editing ability, and independent resolution. Therefore, the future of SVG will look bright and the trend of using SVG will continue to increase.

Default Icon Set

There are several Icon Sets from Materia X2. Here are each of them and their explanation:

Preview Icon ID
icon_android
icon_archive
icon_arrow_left
icon_arrow_right
icon_arrow_top
icon_blogger
icon_check
icon_chevron_down
icon_close
icon_comment
icon_comment_text
icon_copy
icon_dark
icon_download
icon_email
icon_facebook
icon_home
icon_label
icon_light
icon_link
icon_linkedin
icon_list
icon_menu
icon_menu_more
icon_more
icon_page
icon_pin
icon_pinterest
icon_read_more
icon_reddit
icon_reload
icon_search
icon_share
icon_skype
icon_sort_ascending
icon_sort_descending
icon_star
icon_telegram
icon_translate
icon_twitter
icon_verified
icon_whatsapp
icon_youtube
icon_zip

Changing the Default Icon Set (Manual)

You can change the default icon set easily. Materia X2 also has Pre-Defined Default Custom Icons. If you want to change the Default Icon Set, then you need to change them one by one. Follow these steps:

  1. Go to Blogger Dashboard.
  2. Select the Theme menu.
  3. Click the CUSTOMIZE button.
  4. Click Advanced Dropdown, click Default Options Dropdown.
  5. Look for the Slider setting named Custom SVG Icon (Disable | Enable), drag the slider right or left. Here is the explanation:
    • 1px: Disable - Custom SVG Icons will be disabled.
    • 2px: Enable - Custom SVG Icons will be enabled.
  6. Click the Save button (diskette icon) in the lower right corner.

Next, you can set Icon one by one. Follow these steps:

Adding Icon Set using Matericons

Matericons is an open source and optimized collection of SVG Icons from Materia X2. Here are some steps to use it:

  1. Go to the Matericons page.
  2. In the search bar, find and select the name of the icon you want to use.
  3. A popup will appear. Copy all the SVG Path Data code in the Code Box by clicking the Copy icon.

Next, you can follow the following steps:

  1. Go to Blogger Dashboard.
  2. Select the Layout menu.
  3. Look for the section titled Theme Panel Top.
  4. Click the edit button (pencil icon) on the Custom SVG Icons (Link List Gadget).
  5. A Link List Configuration Popup will appear.
  6. You can edit an existing Menu Item by clicking the Edit button (Pencil Icon) or create a new menu item by clicking the ADD A NEW ITEM button. Here are some steps to set it up:
    • In the Site name input, enter the Icon ID. Example: icon_archive.

      You can see and find out the Icon ID through the Default Icon Set table above.

    • In the Site URL input, paste the SVG Path that was copied earlier.
    • If both inputs are set, click the SAVE button next to them.
  7. If you want to finish the configuration, click the SAVE button at the bottom.
If the icon you want doesn't exist, you can request it by writing the name of the icon or image of the icon you want in the comments section.

Adding Icon Set using Material Design Icon Picker

Material Design Icons Picker is a Browser Addon that is useful for finding and using Material Design-themed SVG Icons that have thousands of icons.

Before that, you need to use the SVG icon library called Material Design Icons Picker available for Google Chrome or Mozilla Firefox.

After the addon is installed on the browser you are using, then you can follow these steps:

  1. Click the Material Design Icons Picker Addon.
  2. In the search bar, find the name of the icon you want to use.
  3. Select the icon. At the bottom, click the Copy..., and choose Copy SVG Path.

Next, you can follow the following steps:

  1. Go to Blogger Dashboard.
  2. Select the Layout menu.
  3. Look for the section titled Theme Panel Top.
  4. Click the edit button (pencil icon) on the Custom SVG Icons (Link List Gadget).
  5. A Link List Configuration Popup will appear.
  6. You can edit an existing Menu Item by clicking the Edit button (Pencil Icon) or create a new menu item by clicking the ADD A NEW ITEM button. Here are some steps to set it up:
    • In the Site name input, enter the Icon ID. Example: icon_archive.

      You can see and find out the Icon ID through the Default Icon Set table above.

    • Click the Material Design Icons Picker Addon that you have installed before.
    • In the search bar, find the name of the icon you want to use or the icon corresponding to the label you selected.
    • Select the icon. At the bottom, click the Copy... > Copy SVG Path.
    • Back to Link List Configuration. In the Site URL input, paste the SVG Path that was copied earlier.
    • If both inputs are set, click the SAVE button next to them.
  7. If you want to finish the configuration, click the SAVE button at the bottom.

You can also use SVG Icons in addition to Material Design Icons. But make sure that the icon only has Single Path Data with a maximum width and height of 24px and a viewBox 0 0 24 24. If you are confused, don't worry, we have also provided several Icon Sets that you can use easily. You can open the Icon Sets page.

Changing the Default Icon with Icon Pack (SVG Sprite)

In addition to changing the Default Icon Manually as described above, you can also use the Icon Pack that we have provided.

There are several Default Icon Packs that we provide, here is how it looks:

To set it up, follow these steps:

  1. Go to Blogger Dashboard.
  2. Select the Theme menu.
  3. Click the CUSTOMIZE button.
  4. Click Advanced Dropdown, click Default Options Dropdown.
  5. Look for the Slider setting named Custom SVG Icon (Disable | Enable), drag the slider right or left. Here is the explanation:
    • 1pxDisable - Custom SVG Icons will be disabled.
    • 2px: Enable - Custom SVG Icons will be enabled.
  6. Click the Save button (diskette icon) in the lower right corner.

Next, you need to enter the Icon Pack code. Follow these steps:

  1. Copy one of the SVG Sprite codes above by clicking the copy button provided.
  2. Go to Blogger Dashboard.
  3. Select the Layout menu.
  4. Look for the section titled Theme Panel Top.
  5. Click the edit button (pencil icon) on the Custom SVG Icon Pack (HTML/JavaScript Gadget).
  6. A HTML/JavaScript Configuration Popup will appear.
  7. You can leave the Title input blank.
  8. Here are some steps to set it up:
    • On Content input/textarea, Paste the code that you copied earlier by pressing CTRL + V on the keyboard.
  9. If you want to finish the configuration, click the SAVE button at the bottom.
Please note that in Icon Pack (SVG Sprite), we do not include social media icons like Facebook, Twitter, WhatsApp, etc. because those icons are Logos.
Please don't add any code to the Custom SVG Icon Pack widget other than what is in the documentation.

Those are some steps to configure the Icons in Materia X2 Theme. If you have any questions, please write them in the comments section.

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

Yasya El Hakim
404 Not Found!
تعليقات
To add an image:
[image] image_url [/image]

To add a code block:
[code] your_code [/code]

To add a quote:
[quote] your_quote [/quote]

To add a link:
[link] your_link_text | link_url [/link]