Use code PERFMATTERS for an extra 10% off!
  1. Home
  2. Docs
  3. Tips
  4. How to disable dashicons while still using Mega Menu

How to disable dashicons while still using Mega Menu

Many sites use the Mega Menu plugin these days. The problem with it is that it requires the entire dashicons library (30+ KB) to load, and usually just for one simple arrow icon. It’s strange that they haven’t moved to using SVG code for this, but the good news is that there is a workaround that should work for most.

Disable dashicons and swap the Mega Menu arrow icon

Follow the steps below to disable dashicons and swap the Mega Menu arrow icon.

Step 1

The first step is to remove the existing arrow icon from dashicons. To do this, navigate to the “Generate Settings” tab. This can be found under “Mega Menu → Menu Themes.”

Under the “Arrow” section, you can select the “blank” value instead of an arrow. In this example, we’re just removing the down arrow, as many basic installs only use that.

Remove arrow icon in Mega Menu
Remove arrow icon in Mega Menu

Step 2

Then click into the “Custom Styling” tab. You now need to add a replacement icon. We are simply using the caret down arrow, native to the OS. You could also use your own SVG icon.

Mega Menu Custom Styling
Mega Menu Custom Styling

In the CSS Editor, add the following code. You might need to tweak this based on your site, but it’s a good starting point for any fresh install.

.mega-indicator:after {
content: '▼' !important;
font-size: 7px !important;
position: relative !important;
left: 0.35em !important;}

We’ve found that either ▼ or ⌄ works best for the content symbol.

You can also move it up and down if needed.

bottom: 0.35em !important;

Step 3

Now you can disable dashicons from loading. This assumes nothing else on your WordPress site needs it. In Perfmatters, simply toggle on Disable Dashicons.

Disable Dashicons
Disable Dashicons

Step 4

You will most likey need to clear your used CSS in Perfmatters, along with all cache layers, to ensure all changes are properly displayed.


Here is how the native Mega Menu looks with no changes on a fresh install.

Mega Menu with no changes
Mega Menu with no changes

Here is how Mega Menu looks with the changes above and no dashicons loading. As you can see, most users won’t notice any difference. And you’ll benefit from the faster loading speeds with less CSS.

Mega Menu customized without dashicons
Mega Menu customized without dashicons

Search icon

You may also have a search icon that utilizes dashicons. If so, you could also replace this with some custom CSS. Here is an example.

.dashicons-search:before {
 content: "";
 background-image: url("data:image/svg+xml,%3Csvg xmlns=''; width='20px' height='20px' viewBox='0 0 20 20'%3E%3Cpath fill='currentColor' d='M12.14 4.18a5.504 5.504 0 0 1 .72 6.89c. 1c. 1.04c. 1q-.03.48-.36.81c-.33.33-.49.34-.81.36c-.31.02-.65-.04-.99-.19c-.35-.14-.7-.34-1.04-.59c-.35-.24-.68-.52-1-.84c-.21-.21-.47-.52-.77-.93c-.1-.13-.25-.35-.47-.66c-.22-.32-.4-.57-.56-.78c-.16-.2-.29-.35-.44-.5a5.5 5.5 0 0 1-6.44-.98c-2.14-2.15-2.14-5.64 0-7.78a5.5 5.5 0 0 1 7.78 0m-1.41 6.36a3.513 3.513 0 0 0 0-4.95a3.495 3.495 0 0 0-4.95 0a3.495 3.495 0 0 0 0 4.95a3.495 3.495 0 0 0 4.95 0'/%3E%3C/svg%3E");
 background-repeat: no-repeat;
 background-position: center;

#mega-menu-wrap-menu-1 #mega-menu-menu-1 li#mega-menu-item-140 .mega-search .search-icon:before {
Was this article helpful?

Related Articles