我正在尝试将Material Design图标中的图标与Web应用程序的某些文本垂直对齐。但是,徽标和文本并不是完全垂直对齐。如下图所示:
我该如何解决?代码如下:
HTML :
<div class="categoryRow">
<div class="category">
<mat-icon aria-hidden="false" aria-label="Example book icon" class="logo">book</mat-icon>
<h1 class="categoryLabel">English</h1>
</div>
</div>
SCSS :
.categoryRow{
display: flex;
justify-content: space-evenly;
.category{
display: flex;
flex-direction: column;
align-items: center;
&:hover{
cursor: pointer;
}
}
}
我检查了_icon-theme.css文件,发现以下代码:
@mixin mat-icon-color($config-or-theme) {
$config: mat-get-color-config($config-or-theme);
$primary: map-get($config, primary);
$accent: map-get($config, accent);
$warn: map-get($config, warn);
$background: map-get($config, background);
$foreground: map-get($config, foreground);
.mat-icon {
&.mat-primary {
color: mat-color($primary, text);
}
&.mat-accent {
color: mat-color($accent, text);
}
&.mat-warn {
color: mat-color($warn, text);
}
}
}
@mixin mat-icon-typography($config-or-theme) {}
@mixin _mat-icon-density($config-or-theme) {}
@mixin mat-icon-theme($theme-or-color-config) {
$theme: _mat-legacy-get-theme($theme-or-color-config);
@include _mat-check-duplicate-theme-styles($theme, 'mat-icon') {
$color: mat-get-color-config($theme);
$density: mat-get-density-config($theme);
$typography: mat-get-typography-config($theme);
@if $color != null {
@include mat-icon-color($color);
}
@if $density != null {
@include _mat-icon-density($density);
}
@if $typography != null {
@include mat-icon-typography($typography);
}
}
}