runcoders

<h4>MATERIAL DESIGN</h4>
<p>Material is an adaptable system of guidelines, components, and tools that support the best practices of user interface design. Backed by open-source code, Material streamlines collaboration between designers and developers, and helps teams quickly build beautiful products.</p>
<h4>MATERIAL DESIGN ICONS</h4>
<p>They are simple, modern, friendly, and sometimes quirky icons. Each icon is created using our Material Design guidelines to depict in simple and minimal forms the universal concepts used commonly throughout a UI.<br />
Materializor integrates v7.0.96 (7134 icons) with Elementor icon library.</p>
<h4>WIDGETS AVAILABLE</h4>
<ul>
<li><a href="https://runcoders.net/materializor/button/" rel="nofollow ugc"><strong>Button</strong></a>. Buttons allow users to take actions, and make choices, with a single tap.</li>
<li><a href="https://runcoders.net/materializor/card/" rel="nofollow ugc"><strong>Card</strong></a>. Cards contain content and actions about a single subject.</li>
<li><a href="https://runcoders.net/materializor/chip/" rel="nofollow ugc"><strong>Chip</strong></a>. Chips are compact elements that represent an input, attribute, or action.</li>
<li><a href="https://runcoders.net/materializor/collapsible/" rel="nofollow ugc"><strong>Collapsible</strong></a>. Collapsibles are accordion elements that expand when clicked on.</li>
<li><a href="https://runcoders.net/materializor/fixed-action-button/" rel="nofollow ugc"><strong>Fixed Action Button</strong></a>. A fixed floating action button that allows multiple actions for a screen.</li>
<li><a href="https://runcoders.net/materializor/heading/" rel="nofollow ugc"><strong>Heading</strong></a>. Headings have predetermined typography and style.</li>
<li><a href="https://runcoders.net/materializor/progress/" rel="nofollow ugc"><strong>Progress</strong></a>. Progress express an unspecified wait time or display the length of a process.</li>
<li><a href="https://runcoders.net/materializor/spinner/" rel="nofollow ugc"><strong>Spinner</strong></a>. Spinner express an unspecified wait time of a process.</li>
<li><a href="https://runcoders.net/materializor/tabs/" rel="nofollow ugc"><strong>Tabs</strong></a>. Tabs organize content across different screens, data sets, and other interactions.</li>
</ul>


Materializor

Is a WordPress plugin and Elementor page builder extension with Material Design widgets and icons.

braginteractive

<p>Enables 1000+ Material Design icons within WordPress pages and posts. Icons can be inserted with a shortcode or HTML markup.</p>
<h4>Features</h4>
<ul>
<li><strong>Shortcode generator</strong> – includes an easy-to-use TinyMCE pop-up shortcode generator.</li>
</ul>
<h4>Usage</h4>
<p>Material Design Icons can be used in 3 different ways: shortcode, HTML, and TinyMCE</p>
<h4>1. Shortcode</h4>
<pre><code>[mdi-icon name="material-ul" size="2x" color="red"]
</code></pre>
<p>You can also use hex values for color:<br />
    [mdi-icon name=”material-ul” size=”2x” color=”#000000″]</p>
<p>You can read more about shortcode usage on <a href="https://github.com/braginteractive/Material-Design-Icons-WordPress-Plugin" rel="nofollow ugc">Github</a></p>
<h4>2. TinyMCE</h4>
<p>Material Design Icons also provides you with a pop-up window when editing in TinyMCE’s visual mode. Check out our <a href="https://wordpress.org/plugins/material-design-icons/screenshots/" title="Screenshots" rel="ugc">Screenshots</a> to see what it looks like.</p>
<h4>3. HTML</h4>
<p>Note that prefixes are required for HTML usage. For this reason, shortcode usage is encouraged over HTML. A HTML version would look like:
    </p>


Material Design Icons

Insert Material Design Icons into your WordPress post and pages.

Materializor vs Material Design Icons