Materia X2

Archive: 2021
Sorry, this site doesn't work properly without JavaScript.
Materia X2 - Components (Manual Mode)

Yasya El Hakim
December 22, 2021 November 27, 2023
Get started with over a dozen reusable Materia X2 components with enhancement styles and additional components and options. Built in Com...
View Full Coverage 26 comments
Documentation
Configuring Custom Icons and Icon Packs in Materia X2 Theme

Yasya El Hakim
August 09, 2021 November 27, 2023
Materia X2 uses SVG icons with a Material Design theme. There are several advantages of Icon SVG, including scalability, SEO friendly, edi...
View Full Coverage 5 comments

<script type="text/javascript" src="https://www.blogger.com/static/v1/widgets/2275200714-widgets.js"></script>
<script type='text/javascript'>
window['__wavt'] = 'AOuZoY42rrkiG14fLyS9wvaHiCOfaMcUHg:1737521686207';_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d4906865668815412272','//materiax.elcreativeacademy.com/2021/','4906865668815412272');
_WidgetManager._SetDataContext([{'name': 'blog', 'data': {'blogId': '4906865668815412272', 'title': 'Materia X2', 'url': 'https://materiax.elcreativeacademy.com/2021/', 'canonicalUrl': 'https://materiax.elcreativeacademy.com/2021/', 'homepageUrl': 'https://materiax.elcreativeacademy.com/', 'searchUrl': 'https://materiax.elcreativeacademy.com/search', 'canonicalHomepageUrl': 'https://materiax.elcreativeacademy.com/', 'blogspotFaviconUrl': 'https://materiax.elcreativeacademy.com/favicon.ico', 'bloggerUrl': 'https://www.blogger.com', 'hasCustomDomain': true, 'httpsEnabled': true, 'enabledCommentProfileImages': true, 'gPlusViewType': 'FILTERED_POSTMOD', 'adultContent': false, 'analyticsAccountNumber': 'UA-115593236-1', 'encoding': 'UTF-8', 'locale': 'en', 'localeUnderscoreDelimited': 'en', 'languageDirection': 'ltr', 'isPrivate': false, 'isMobile': false, 'isMobileRequest': false, 'mobileClass': '', 'isPrivateBlog': false, 'isDynamicViewsAvailable': true, 'feedLinks': '\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Materia X2 - Atom\x22 href\x3d\x22https://materiax.elcreativeacademy.com/feeds/posts/default\x22 /\x3e\n\x3clink rel\x3d\x22alternate\x22 type\x3d\x22application/rss+xml\x22 title\x3d\x22Materia X2 - RSS\x22 href\x3d\x22https://materiax.elcreativeacademy.com/feeds/posts/default?alt\x3drss\x22 /\x3e\n\x3clink rel\x3d\x22service.post\x22 type\x3d\x22application/atom+xml\x22 title\x3d\x22Materia X2 - Atom\x22 href\x3d\x22https://www.blogger.com/feeds/4906865668815412272/posts/default\x22 /\x3e\n', 'meTag': '', 'adsenseClientId': 'ca-pub-9969565481002906', 'adsenseHostId': 'ca-host-pub-1556223355139109', 'adsenseHasAds': true, 'adsenseAutoAds': false, 'boqCommentIframeForm': true, 'loginRedirectParam': '', 'view': '', 'dynamicViewsCommentsSrc': '//www.blogblog.com/dynamicviews/4224c15c4e7c9321/js/comments.js', 'dynamicViewsScriptSrc': '//www.blogblog.com/dynamicviews/c8f12f73e8f3b106', 'plusOneApiSrc': 'https://apis.google.com/js/platform.js', 'disableGComments': true, 'interstitialAccepted': false, 'sharing': {'platforms': [{'name': 'Get link', 'key': 'link', 'shareMessage': 'Get link', 'target': ''}, {'name': 'Facebook', 'key': 'facebook', 'shareMessage': 'Share to Facebook', 'target': 'facebook'}, {'name': 'BlogThis!', 'key': 'blogThis', 'shareMessage': 'BlogThis!', 'target': 'blog'}, {'name': 'X', 'key': 'twitter', 'shareMessage': 'Share to X', 'target': 'twitter'}, {'name': 'Pinterest', 'key': 'pinterest', 'shareMessage': 'Share to Pinterest', 'target': 'pinterest'}, {'name': 'Email', 'key': 'email', 'shareMessage': 'Email', 'target': 'email'}], 'disableGooglePlus': true, 'googlePlusShareButtonWidth': 0, 'googlePlusBootstrap': '\x3cscript type\x3d\x22text/javascript\x22\x3ewindow.___gcfg \x3d {\x27lang\x27: \x27en\x27};\x3c/script\x3e'}, 'hasCustomJumpLinkMessage': true, 'jumpLinkMessage': 'View Full Coverage', 'pageType': 'archive', 'pageName': '2021', 'pageTitle': 'Materia X2: 2021', 'metaDescription': 'Material Design Multipurpose Blogger Template Inspired by Google Material Design.'}}, {'name': 'features', 'data': {}}, {'name': 'messages', 'data': {'edit': 'Edit', 'linkCopiedToClipboard': 'Link copied to clipboard!', 'ok': 'Ok', 'postLink': 'Post Link'}}, {'name': 'template', 'data': {'name': 'custom', 'localizedName': 'Custom', 'isResponsive': true, 'isAlternateRendering': false, 'isCustom': true}}, {'name': 'view', 'data': {'classic': {'name': 'classic', 'url': '?view\x3dclassic'}, 'flipcard': {'name': 'flipcard', 'url': '?view\x3dflipcard'}, 'magazine': {'name': 'magazine', 'url': '?view\x3dmagazine'}, 'mosaic': {'name': 'mosaic', 'url': '?view\x3dmosaic'}, 'sidebar': {'name': 'sidebar', 'url': '?view\x3dsidebar'}, 'snapshot': {'name': 'snapshot', 'url': '?view\x3dsnapshot'}, 'timeslide': {'name': 'timeslide', 'url': '?view\x3dtimeslide'}, 'isMobile': false, 'title': 'Materia X2', 'description': 'Material Design Multipurpose Blogger Template Inspired by Google Material Design.', 'url': 'https://materiax.elcreativeacademy.com/2021/', 'type': 'feed', 'isSingleItem': false, 'isMultipleItems': true, 'isError': false, 'isPage': false, 'isPost': false, 'isHomepage': false, 'isArchive': true, 'isLabelSearch': false, 'archive': {'year': 2021, 'rangeMessage': 'Showing posts from 2021'}}}, {'name': 'widgets', 'data': [{'title': 'JavaScript Variables', 'type': 'LinkList', 'sectionId': 'elcreative_panel_top', 'id': 'LinkList995'}, {'title': 'CSS Options', 'type': 'LinkList', 'sectionId': 'elcreative_panel_top', 'id': 'LinkList996'}, {'title': 'Custom SVG Icons', 'type': 'LinkList', 'sectionId': 'elcreative_panel_top', 'id': 'LinkList998'}, {'title': 'Custom SVG Pack (SVG Sprites)', 'type': 'HTML', 'sectionId': 'elcreative_panel_top', 'id': 'HTML994'}, {'title': 'Materia X2 (Header)', 'type': 'Header', 'sectionId': 'section_app_bar', 'id': 'Header1'}, {'title': 'Navigation Drawer Menu', 'type': 'LinkList', 'sectionId': 'section_navigation', 'id': 'LinkList999'}, {'title': 'More Menu', 'type': 'PageList', 'sectionId': 'section_navigation', 'id': 'PageList999'}, {'title': 'Posts Label Search Description', 'type': 'LinkList', 'sectionId': 'section_main_widget', 'id': 'LinkList997'}, {'title': 'Blog Posts', 'type': 'Blog', 'sectionId': 'section_main_widget', 'id': 'Blog1', 'posts': [{'id': '2801985184588973506', 'title': 'Materia X2 - Components (Manual Mode)', 'featuredImage': 'https://lh3.googleusercontent.com/uONu3zhnMRwMlgPTI_hasHG5PCrMTjkQVDfgFRzN9TsrvAnX_d4hPBqcqAPdwsmZdLc4B8Z5Ut41a0m4nuwOQtxKjjWcZX2MHCHaZnYhpUrlN8lit2I\x3dw2400-rj', 'showInlineAds': true}, {'id': '2720176720182916562', 'title': 'Configuring Custom Icons and Icon Packs in Materia X2 Theme', 'featuredImage': 'https://lh3.googleusercontent.com/4VKlX4nQfRYMF2L43x-JiNzThY-Z47BzhIi7f8rWkOCA_Z7IWoLbsobRgHxEzsWoGaK2TNpn-QMRqGu-lppIWPXNl7F_mvhTltEt97TrL5RZEGqcluk\x3dw2400-rj', 'showInlineAds': true}], 'footerBylines': [{'regionName': 'footer1', 'items': [{'name': 'author', 'label': ''}, {'name': 'comments', 'label': 'comments'}, {'name': 'share', 'label': ''}, {'name': 'timestamp', 'label': ''}]}, {'regionName': 'footer2', 'items': [{'name': 'labels', 'label': 'Labels:'}]}], 'allBylineItems': [{'name': 'author', 'label': ''}, {'name': 'comments', 'label': 'comments'}, {'name': 'share', 'label': ''}, {'name': 'timestamp', 'label': ''}, {'name': 'labels', 'label': 'Labels:'}]}, {'title': 'elcreativeBlockFAQ', 'type': 'LinkList', 'sectionId': 'section_main_bottom_widget', 'id': 'LinkList4'}, {'title': 'elcreativeBlockFooter', 'type': 'LinkList', 'sectionId': 'section_main_bottom_widget', 'id': 'LinkList9'}, {'title': 'Showcase', 'type': 'BlogList', 'sectionId': 'section_aside_widget', 'id': 'BlogList1'}, {'title': '', 'type': 'HTML', 'sectionId': 'section_aside_widget', 'id': 'HTML2'}, {'title': 'elcreativeSocial', 'type': 'LinkList', 'sectionId': 'section_aside_widget', 'id': 'LinkList10'}, {'title': 'Custom Vanilla JavaScript', 'type': 'HTML', 'sectionId': 'elcreative_panel_bottom', 'id': 'HTML998'}, {'title': 'Custom jQuery Script', 'type': 'HTML', 'sectionId': 'elcreative_panel_bottom', 'id': 'HTML999'}, {'title': 'Contact Form', 'type': 'ContactForm', 'sectionId': 'hidden', 'id': 'ContactForm1'}, {'title': 'Translate', 'type': 'Translate', 'sectionId': 'hidden', 'id': 'Translate1'}]}]);
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList995', 'elcreative_panel_top', document.getElementById('LinkList995'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList996', 'elcreative_panel_top', document.getElementById('LinkList996'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList998', 'elcreative_panel_top', document.getElementById('LinkList998'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML994', 'elcreative_panel_top', document.getElementById('HTML994'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HeaderView', new _WidgetInfo('Header1', 'section_app_bar', document.getElementById('Header1'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList999', 'section_navigation', document.getElementById('LinkList999'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_PageListView', new _WidgetInfo('PageList999', 'section_navigation', document.getElementById('PageList999'), {'title': 'More Menu', 'links': [{'isCurrentPage': false, 'href': 'https://materiax.elcreativeacademy.com/p/login.html', 'id': '8573412184130581783', 'title': 'Dashboard'}, {'isCurrentPage': false, 'href': 'https://materiax.elcreativeacademy.com/p/sitemap_13.html', 'id': '1595888570817766907', 'title': 'SafeLink'}, {'isCurrentPage': false, 'href': 'https://materiax.elcreativeacademy.com/p/sitemap.html', 'id': '2039874809476318051', 'title': 'Sitemap'}], 'mobile': false, 'showPlaceholder': true, 'hasCurrentPage': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList997', 'section_main_widget', document.getElementById('LinkList997'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'section_main_widget', document.getElementById('Blog1'), {'cmtInteractionsEnabled': false}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList4', 'section_main_bottom_widget', document.getElementById('LinkList4'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList9', 'section_main_bottom_widget', document.getElementById('LinkList9'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_BlogListView', new _WidgetInfo('BlogList1', 'section_aside_widget', document.getElementById('BlogList1'), {'numItemsToShow': 5, 'totalItems': 3}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML2', 'section_aside_widget', document.getElementById('HTML2'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_LinkListView', new _WidgetInfo('LinkList10', 'section_aside_widget', document.getElementById('LinkList10'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML998', 'elcreative_panel_bottom', document.getElementById('HTML998'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_HTMLView', new _WidgetInfo('HTML999', 'elcreative_panel_bottom', document.getElementById('HTML999'), {}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'hidden', document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Sending...', 'contactFormMessageSentMsg': 'Your message has been sent.', 'contactFormMessageNotSentMsg': 'Message could not be sent. Please try again later.', 'contactFormInvalidEmailMsg': 'A valid email address is required.', 'contactFormEmptyMessageMsg': 'Message field cannot be empty.', 'title': 'Contact Form', 'blogId': '4906865668815412272', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'contactFormToken': 'AOuZoY4S2U0jQ5elcsLqH6i0OEaEjSs6HQ:1737521686216', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
_WidgetManager._RegisterWidget('_TranslateView', new _WidgetInfo('Translate1', 'hidden', document.getElementById('Translate1'), {}, 'displayModeFull'));
</script>
</body>