Materialdesign: is there an attribute or class for resizing an icon?

Created on 9 Aug 2015  路  4Comments  路  Source: Templarian/MaterialDesign

...or do you need create your own classes in a separate .css file?

High Priority Question Webfont

Most helpful comment

Yes.
I added a custom css based on
http://google.github.io/material-design-icons/

.mdi-18px { font-size: 18px; }
.mdi-24px { font-size: 24px; }
.mdi-36px { font-size: 36px; }
.mdi-48px { font-size: 48px; }
.mdi-dark { color: rgba(0, 0, 0, 0.54); }
.mdi-dark.mdi-inactive { color: rgba(0, 0, 0, 0.26); }
.mdi-light { color: rgba(255, 255, 255, 1); }
.mdi-light.mdi-inactive { color: rgba(255, 255, 255, 0.3); }

works pretty well with angular material.
(the default icon size was a bit too small)

 <md-button class="md-fab md-mini mdi mdi-pencil-box-outline mdi-24px"
                    ng-click="show()">
 </md-button>

image

All 4 comments

Do you mean like font awesome has the fa-lg, fa-2x, fa-3x, fa-4x, and fa-5x?

I've been thinking of adding them, seems like it may be useful.

Yes.
I added a custom css based on
http://google.github.io/material-design-icons/

.mdi-18px { font-size: 18px; }
.mdi-24px { font-size: 24px; }
.mdi-36px { font-size: 36px; }
.mdi-48px { font-size: 48px; }
.mdi-dark { color: rgba(0, 0, 0, 0.54); }
.mdi-dark.mdi-inactive { color: rgba(0, 0, 0, 0.26); }
.mdi-light { color: rgba(255, 255, 255, 1); }
.mdi-light.mdi-inactive { color: rgba(255, 255, 255, 0.3); }

works pretty well with angular material.
(the default icon size was a bit too small)

 <md-button class="md-fab md-mini mdi mdi-pencil-box-outline mdi-24px"
                    ng-click="show()">
 </md-button>

image

I'll get it added to the next release, which should be this week.

Closing this issue. It is in the build script now and will go in the latest release later this week.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

adambiggs picture adambiggs  路  3Comments

xaviergonz picture xaviergonz  路  3Comments

kaurkaur picture kaurkaur  路  3Comments

giooliveira picture giooliveira  路  3Comments

EdricChan03 picture EdricChan03  路  3Comments