How to change default material select dropdown icon?

Topic: How to change default material select dropdown icon?

Sanches asked 2 years ago

MDB PRO has a perfect material select but I would like to change default drop down icon

<div class="select-wrapper mdb-select md-form">
    <span class="caret">▼</span> // !
    // I would like to replace icon with other one from fontawesome

For this I've changed mdb.js file's code:

this.$dropdownIcon = this.options.defaultMaterialInput ? "" : $('<span class="caret">▼</span>')...

To the following:

this.$dropdownIcon = this.options.defaultMaterialInput ? "" : $('<span class="caret"><i class="fas fa-angle-down"></i></span>')...

But it's not changing the icon. How can I do that? Thanks beforehand!

P.S.I'm using mdb pro JQuery version 4.11

Grzegorz Bujański staff commented 2 years ago


Try this: this.$dropdownIcon = this.options.defaultMaterialInput ? "" : $('<span class="caret fas fa-angle-down"></span>');

Best, Grzegorz

Sanches commented 2 years ago

Thank you! Worked =)

Grzegorz Bujański staff commented 2 years ago

No problem :) Best, Grzegorz.

Kristian Mark Surat pro premium answered 11 months ago

How to do this in Angular MDBootstrap Pro?

Grzegorz Bujański staff commented 11 months ago

Do you mean MDB4 Angular or MDB5 Angular?

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.11.0
  • Device: Desktop
  • Browser: chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No