MDI Web Components

This page illustrates various ways to use <mdi-icon> and <mdi-stack>.

<mdi-icon> - Render single SVG icon.
<mdi-stack> - Overlay icons above eachother.

Basic

Icon No Attributes


      <mdi-icon></mdi-icon>

Icon Path Attribute


      <mdi-icon path="M12,4C14.21,4 16,5.79 16,8C16,10.21 14.21,12 12,12C9.79,12 8,10.21 8,8C8,5.79 9.79,4 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z"></mdi-icon>

Button - Icon Style Attribute


      <button>

        <mdi-icon style="vertical-align: middle;"></mdi-icon>

      </button>

Trigger Unmount

Icon

Stack