Is it possible to use dark and light custom icons?

[jorge-campo]

I see the built-in Material for MkDocs icons change their color automatically when changing the theme: white icons under the dark theme and black icons in the light theme. This happens without adding any extra code to the Markdown file.

Is it possible to achieve the same effect with custom icons?

I may be wrong, but I haven't seen this question posted before and can't find any information in the Material for MkDocs documentation.

Thanks!

[squidfunk]

Yes that's definitely possible. You must make sure that your SVG does not contain any fill or stroke attributes. This is likely added by vector graphic programs when exporting SVGs, so remove them and you should see the colors taking effect.

[jorge-campo]

Thanks, @squidfunk ! I see the SVG icons in Figma do not contain these attributes. The question is, what should I do now? Should I drop the dark and light versions of these icons in the .icons folder, and Material will pick up the correct version?

[squidfunk]

In order to use the native color switching functionality, there needs to be only one icon version without fill attributes. The theme will then fill in the colors:

mkdocs-material/src/assets/stylesheets/main/extensions/pymdownx/_emoji.scss

Lines 37 to 41 in 82f3b1a

	svg {
	width: px2em(18px);
	max-height: 100%;
	fill: currentcolor;
	}

[squidfunk]

Also, see our logo for reference.

[jorge-campo]

Thank you! I tested this, and it works 🙂