Issue
This question comes from the Material2 Github repo.
I still have problems to style a Material component that is wrapped in a custom component.
I have a <logo>
component that contains <md-icon svgIcon="logo"></md-icon>
Adding:
:host {
.mat-icon {
width: 100px;
height: 100px;
font-size: 56px;
}
}
Will not apply to the Material component inside my custom component.
Solution
UPDATE: 2019-05-22
Newer versions of Material Design has the option to set [inline]="true"
as a property on the HTML element.
I would recommend using that approach instead.
<mat-icon svgIcon="thumbs-up" inline="true"></mat-icon>
When using this, the icon will inherit from the parent container!
GLHF! :)
I have been getting some questions about this so I just wanted to make a clearer example of how to use it...
/* 1. Add this mixin to a "global" scss */
@mixin md-icon-size($size: 24px) {
font-size: $size;
height: $size;
width: $size;
line-height: $size;
}
/* 2. Then use it like this in you component scss */
mat-icon {
@include md-icon-size(32px);
}
example usage
<mat-icon class="myIcon" svgIcon="search"></mat-icon>
:host {
.myIcon {
&mat-icon {
@include md-icon-size(32px);
}
}
}
Answered By - Mackelito
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.