Basic Exapmle
<div class="ul-dropdown mr-2" id="dropdownWrapper">
<button class="btn btn-primary" data-toggle="dropdown">
Dropdown Button
<span class="material-icons align-middle ml-2">keyboard_arrow_down</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">1st Action</a>
<a class="dropdown-item" href="#">2nd Action</a>
<a class="dropdown-item" href="#">3rd Action</a>
</div>
</div>
<div class="ul-dropdown mr-2" id="dropdownWrapper">
<button class="btn btn-primary" data-toggle="dropdown">
Icon Menu
<span class="material-icons align-middle ml-2">keyboard_arrow_down</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
<span class="material-icons align-middle text-base mr-1">call </span>
First Action
</a>
<a class="dropdown-item" href="#">
<span class="material-icons align-middle text-base mr-1">chat_bubble_outline </span>
Second Action
</a>
<a class="dropdown-item" href="#">
<span class="material-icons align-middle text-base mr-1">inbox</span>
Third Action
</a>
</div>
</div>
<div class="ul-dropdown mr-2" id="dropdownWrapper">
<button class="btn btn-primary btn-sm" data-toggle="dropdown">
<span class="material-icons">cloud_download</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
<span class="material-icons align-middle text-base mr-1">call </span>
First Action
</a>
<a class="dropdown-item" href="#">
<span class="material-icons align-middle text-base mr-1">chat_bubble_outline </span>
Second Action
</a>
<a class="dropdown-item" href="#">
<span class="material-icons align-middle text-base mr-1">inbox</span>
Third Action
</a>
</div>
</div>Variant Color
<div class="ul-dropdown mr-2" id="dropdownWrapper">
<button class="btn btn-primary" data-toggle="dropdown">
Primary
<span class="material-icons align-middle ml-2">keyboard_arrow_down</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">1st Action</a>
<a class="dropdown-item" href="#">2nd Action</a>
<a class="dropdown-item" href="#">3rd Action</a>
</div>
</div>
<div class="ul-dropdown mr-2" id="dropdownWrapper">
<button class="btn btn-danger" data-toggle="dropdown">
Danger
<span class="material-icons align-middle ml-2">keyboard_arrow_down</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
<span class="material-icons align-middle text-base mr-1">call </span>First Action
</a>
<a class="dropdown-item" href="#">
<span class="material-icons align-middle text-base mr-1">chat_bubble_outline </span>Second Action</a>
<a class="dropdown-item" href="#">
<span class="material-icons align-middle text-base mr-1">inbox</span>
Third Action
</a>
</div>
</div>
<div class="ul-dropdown mr-2" id="dropdownWrapper">
<button class="btn btn-warning" data-toggle="dropdown">Warning
<span class="material-icons align-middle ml-2">keyboard_arrow_down</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
<span class="material-icons align-middle text-base mr-1">call </span>
First Action
</a>
<a class="dropdown-item" href="#">
<span class="material-icons align-middle text-base mr-1">chat_bubble_outline </span>
Second Action
</a>
<a class="dropdown-item" href="#">
<span class="material-icons align-middle text-base mr-1">inbox</span>
Third Action
</a>
</div>
</div>
<div class="ul-dropdown mr-2" id="dropdownWrapper">
<button class="btn btn-info" data-toggle="dropdown">Info
<span class="material-icons align-middle ml-2">keyboard_arrow_down</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
<span class="material-icons align-middle text-base mr-1">call </span>
First Action
</a>
<a class="dropdown-item" href="#">
<span class="material-icons align-middle text-base mr-1">chat_bubble_outline </span>
Second Action
</a>
<a class="dropdown-item" href="#">
<span class="material-icons align-middle text-base mr-1">inbox</span>
Third Action
</a>
</div>
</div>
<!-- Outline -->
<div class="ul-dropdown mr-2" id="dropdownWrapper">
<button class="btn btn-primary-outline" data-toggle="dropdown">
Primary
<span class="material-icons align-middle ml-2">keyboard_arrow_down</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">1st Action</a>
<a class="dropdown-item" href="#">2nd Action</a>
<a class="dropdown-item" href="#">3rd Action</a>
</div>
</div>
<div class="ul-dropdown mr-2" id="dropdownWrapper">
<button class="btn btn-danger-outline" data-toggle="dropdown">
Danger
<span class="material-icons align-middle ml-2">keyboard_arrow_down</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
<span class="material-icons align-middle text-base mr-1">call </span>First Action
</a>
<a class="dropdown-item" href="#">
<span class="material-icons align-middle text-base mr-1">chat_bubble_outline </span>Second Action</a>
<a class="dropdown-item" href="#">
<span class="material-icons align-middle text-base mr-1">inbox</span>
Third Action
</a>
</div>
</div>
<div class="ul-dropdown mr-2" id="dropdownWrapper">
<button class="btn btn-warning-outline" data-toggle="dropdown">Warning
<span class="material-icons align-middle ml-2">keyboard_arrow_down</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
<span class="material-icons align-middle text-base mr-1">call </span>
First Action
</a>
<a class="dropdown-item" href="#">
<span class="material-icons align-middle text-base mr-1">chat_bubble_outline </span>
Second Action
</a>
<a class="dropdown-item" href="#">
<span class="material-icons align-middle text-base mr-1">inbox</span>
Third Action
</a>
</div>
</div>
<div class="ul-dropdown mr-2" id="dropdownWrapper">
<button class="btn btn-info-outline" data-toggle="dropdown">Info
<span class="material-icons align-middle ml-2">keyboard_arrow_down</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">
<span class="material-icons align-middle text-base mr-1">call </span>
First Action
</a>
<a class="dropdown-item" href="#">
<span class="material-icons align-middle text-base mr-1">chat_bubble_outline </span>
Second Action
</a>
<a class="dropdown-item" href="#">
<span class="material-icons align-middle text-base mr-1">inbox</span>
Third Action
</a>
</div>
</div>