Search code examples
sassmaterial-components-web

How do you set the density for mdc-icon-button using mixins?


I'm pretty new to using sass and I'm having some trouble using a mixin for Material.io's icon buttons.
The page I linked describes using the density($density-scale) mixin, but I can't seem to figure out how to use it. The Getting Started guide shows an example of how to use a mixin for an mdc-button, so I tried doing the same thing for an mdc-icon-button. Here are some things I tried.

@use "@material/icon-button/mdc-icon-button";
@use "@material/icon-button";
// ^ The line above results in this error: SassError: Can't find stylesheet to import.

For the actual element, since this import didn't work, I tried the following.

.mdc-icon-button {
    @include icon-button.density(-1);
    // ^ SassError: There is no module with the namespace "icon-button".
    @include mdc-icon-button.density(-1);
    @include mdc-icon-button-density(-1);
    @include density(-1);
    // ^ All of these lines cause the following error: SassError: Undefined mixin.
}

I'm just not sure what to do at this point. How can I use the density mixin for this component?


Solution

  • This actually turns out to be a bug with sass-loader. You can check here for a temporary workaround while something else is worked out. Using the workaround causes imports to not fail anymore, and the documentation is still accurate for the components.