vue-material-design-icons: Property :size is not working correctly

@kaczor6418

Thanks for your PR. I created a separate file with the styles that you suggested in your PR. Then I import the styles, not from node_modules, but mine. And it works fine. It strange that owner (@robcresswell) ignores your PR.

so size of this ican should be 100 x 100, but it is not. Size of icon is still 24 x 24 which is default size of this icon. So in my opinion it is a bug

It’s staying as 24 because the CSS is overruling it. If you remove the CSS like I suggested, it would work fine. As I said, its only an optional suggestion for people that don’t like styling with JS (like myself)

you do not have to use this css it is just my proposition. And i can say that you can do it even easier, you can remove whole .material-design-icon > .material-design-icon__svg class and center all icns in .material-design-icon class

Cool! I’ll take a look and see if it works

@robcresswell you do not have to use this css it is just my proposition. And i can say that you can do it even easier, you can remove whole .material-design-icon > .material-design-icon__svg class and center all icns in .material-design-icon class. Example below:

.material-design-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

I do not see any benefits of this :

.material-design-icon {
  display: inline-flex;
  align-self: center;
  position: relative;
  height: 1em;
  width: 1em;
}
.material-design-icon > .material-design-icon__svg {
  height: 1em;
  width: 1em;
  fill: currentColor;
  position: absolute;
  bottom: -0.125em;
}

If there is any please tell me. I am curious

@robcresswell you do not have to use this css it is just my proposition. And i can say that you can do it even easier, you can remove whole .material-design-icon > .material-design-icon__svg class and center all icns in .material-design-icon class. Example below:

.material-design-icon {
  display: flex;
  align-items: center;
  justify-content: center;
}

I do not see any benefits of this :

.material-design-icon {
  display: inline-flex;
  align-self: center;
  position: relative;
  height: 1em;
  width: 1em;
}
.material-design-icon > .material-design-icon__svg {
  height: 1em;
  width: 1em;
  fill: currentColor;
  position: absolute;
  bottom: -0.125em;
}

If there is any please tell me. I am curious

@altin-mapme try this fix. You need change .css inside vue-material directory in node_modules directory.

BTW I don’t know why owner(@robcresswell) of this repository ignore my PR for such a long time. He said he will let me know is this change is acceptable, but he still didn’t answer.

Hi @kaczor6418, thanks for raising an issue! This isn’t a bug, I think. I recommend using the CSS OR the JS for styling, but not both. The CSS is optional, so you can write your own if you don’t want to use the default; its only a few lines. Your fix will remove a lot of the default sizing from the CSS, which I disagree with.

See the note in https://github.com/robcresswell/vue-material-design-icons#props under fillColor about using one or the other. I’ll update it for clarity