I create a new Magento 2 theme extend Luma. I want to add a css file to rewrite the default Luma style.

I add in the default_head_blocks.xml file:

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../vendor/magento/framework/Module/etc/module.xsd">
    <css src="css/custom.css" />

But is not work.

For example I want to replace the search button icon with my image, but custom.css in under the style-l.css. What I can do? I can change the order of the styles?

or what is the best way to change the Luma styles?

enter image description here

  • The best way is to use less files and make changes in those files in your theme. – Manish Joy Jan 17 '18 at 13:41
  • so if I create a new theme is not any way to rewrite the parent theme style? – Robert Jan 17 '18 at 13:43
  • you can easily re-write the style be copying the same file in your theme from parent theme. – Manish Joy Jan 17 '18 at 13:45
  • so in my case what file I need to change to remove the search icon and to have only my image? – Robert Jan 17 '18 at 13:46
  • I have added an answer, please check that. – Manish Joy Jan 17 '18 at 13:52

In your case, you need to override _icons.less file in your theme and then make changes in that. Example:


After changing this, you need to run setup:upgrade so that files from pub get erased and then setup:static-content:deploy

alternatively, you may use grunt to compile less into CSS.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.