Align material icon with text on Materialize

css icons materialize google-material-icons
MucaP picture MucaP · Oct 7, 2016 · Viewed 34.5k times · Source

Recently, i started working on a project that contains a table with some fields, and I want to add some Material Design Icons trough MaterializeCSS on the side of the icons. Look at the image and you might get it

:example

I tried everything, vertical align, inline(-block), flex, and everything I could find in stack overflow. So no, it's not a duplicate, I really need help. Thank you.

Answer

darkknightsds picture darkknightsds · Oct 10, 2017

I had the same issue for the longest time but found a solution that worked for me. First, give a custom class to the icon you want to center. Then, add a bottom vertical align and a font-size that matches or is smaller than the text it is placed next to. Also, don't specify icon size in the icon classname. Let me know if this works for you.

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>

Related questions

How to style icon color, size, and shadow of Font Awesome Icons

How could I style the color, size and shadow of icons from Font Awesome's Icons? For example, Font Awesome's site will show some icons in white and some in red but won't show the CSS for how to style them …

Read More
Put icon inside input element in a form

How do I put an icon inside a form's input element? Live version at: Tidal Force theme

Read More
Put search icon near textbox using bootstrap

I am using bootstrap by default textbox taking full width of column and I want to put search icon at the end to textbox. My code is like this: <div class="container"> <div class="row"> <…

Read More