Material Symbol mit Text auf Materialize

Question

Vor kurzem begann ich mit der Arbeit an einem Projekt, das eine Tabelle mit einigen Feldern enthält, und ich möchte einige Material Design Icons über MaterializeCSS auf der Seite der Symbole hinzufügen. Schauen Sie das Bild an und Sie könnten es

erhalten:

Ich habe alles versucht, vertikal ausrichten, Inline (-block), Flex, und alles, was ich konnte in Stack-Überlauf finden. Also nein, es ist kein Duplikat, ich brauche wirklich Hilfe. Danke.

Answer 1

Das ist eine Lösung. Natürlich hängt es vom Symbol ab, dass Sie die spezifische font-size finden müssen, die zur Höhe des Symbols passt. Beispiele:

#txt1{ 
 
font-size:28px; 
 
line-height:24px; 
 
} 
 
#txt2{ 
 
font-size:36px; 
 
line-height:24px; 
 
} 
 
#txt3{ 
 
font-size:21px; 
 
line-height:24px; 
 
} 
 
.material-icons{ 
 
    display: inline-flex; 
 
    vertical-align: top; 
 
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
 

 
<span id="txt1">ID</span><i class="material-icons">info_outline</i> 
 
</br> 
 
<span id="txt2">ID</span><i class="material-icons">settings_cell</i> 
 
</br> 
 
<span id="txt3">ID</span><i class="material-icons">stay_primary_landscape</i>

Answer 2

Ich hatte das gleiche Problem für die längste Zeit, aber eine Lösung gefunden, die für mich gearbeitet. Geben Sie zunächst dem Symbol, das Sie zentrieren möchten, eine benutzerdefinierte Klasse. Fügen Sie dann eine untere vertikale Ausrichtung und eine Schriftgröße hinzu, die dem Text entspricht oder kleiner ist, neben dem sie platziert wird. Geben Sie außerdem keine Symbolgröße im Symbol Klassennamen an. Lassen Sie mich wissen, ob dies für Sie funktioniert.

CSS:

.inline-icon { 
    vertical-align: bottom; 
    font-size: 18px !important; 
} 

HTML:

<p>"Your text goes here"<i class="inline-icon material-icons">warning</i></p>