Using JavaScript, grammatically add material icons side by side

Question

Using JavaScript, grammatically add material icons side by side

Looking to dynamically update the contents of a div element by adding two material icons side by side.

To test this, I created a simple fiddle that demonstrates what I am trying to achieve: https://jsfiddle.net/zog20r7n/3/

When attempting to modify line 36, which currently contains:

<i class=\"material-icons \" >account inbox</i>

to:

<i class=\"material-icons md-mine\" >account inbox</i>

The first icon ends up being aligned to the right of the second icon. It also seems like upon clicking the button for the first time, the icons are misaligned on the page and the second one appears centered on a new line.

If anyone can shed some light on why this is happening and provide a solution, it would be greatly appreciated. I've tried adjusting the CSS thinking it might be the cause, but without success so far.

javascript html css material-design

Answer 1

Answer №1

I'm not sure what the correct position should be, but....

Check out the CSS icon below.

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap; 
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased; 
}

Here's how you can override some of these properties:

.material-icons {
  white-space: disable; 
}

And remove spaces between elements:

width: fit-content

Answer 2

I'm not sure what the correct position should be, but....

Check out the CSS icon below.

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap; 
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased; 
}

Here's how you can override some of these properties:

.material-icons {
  white-space: disable; 
}

And remove spaces between elements:

width: fit-content

Answer 3

Answer №2

Ensure that when using material icons as an icon font, you follow the convention of using snake_case inside the  tag: (
```
account box => account_box
```
).
Your implementation of material icons is incorrect.
Incorrect in terms of being "invalid". There is no icon called account inbox. The valid options are account box, account balance, account balance wallet, and account circle.
This could be considered the main issue with your code (as it appears cluttered and difficult to understand).
It is not advisable to apply text-align: center to every single element on your page. Adding it to the body suffices and can easily be overridden.
The practice of completely replacing two tags with a version containing a style attribute and a font-size declaration seems unnecessary. It would be more efficient to toggle a class on the parent element and apply the appropriate font-size through CSS.

To sum it up, here is how I would approach it:

$("#testButton").on('click', function() { $('#divContent').toggleClass('largeFonts')});

body {
  text-align: center;
}
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v31/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  display: block;
  color:deepskyblue;
  font-style: normal;
  font-weight: normal;
  font-size: 96px;
  line-height: 1;
  text-transform: none;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  transform: scale(.25);
  transition: transform .3s cubic-bezier(.4,0,.2,1)
}
#divContent {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
#divContent.largeFonts .material-icons {
  transform: scale(1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="testButton" type="button">Click to test</button>

<div id="divContent">
    <i class="material-icons">account_box</i>
    <i class="material-icons">computer</i>
</div>

I maintained the font-size at 96px for consistency and altered the icon size using transform. This results in smoother transitions (demonstrated), lighter load on the browser (even with multiple animated items), and crucially, ensures a consistent line-height across all states to prevent jumping of elements on the same line or below upon clicking the button.

Remember to use autoprefixing.

Answer 4

Ensure that when using material icons as an icon font, you follow the convention of using snake_case inside the  tag: (
```
account box => account_box
```
).
Your implementation of material icons is incorrect.
Incorrect in terms of being "invalid". There is no icon called account inbox. The valid options are account box, account balance, account balance wallet, and account circle.
This could be considered the main issue with your code (as it appears cluttered and difficult to understand).
It is not advisable to apply text-align: center to every single element on your page. Adding it to the body suffices and can easily be overridden.
The practice of completely replacing two tags with a version containing a style attribute and a font-size declaration seems unnecessary. It would be more efficient to toggle a class on the parent element and apply the appropriate font-size through CSS.

To sum it up, here is how I would approach it:

$("#testButton").on('click', function() { $('#divContent').toggleClass('largeFonts')});

body {
  text-align: center;
}
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v31/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  display: block;
  color:deepskyblue;
  font-style: normal;
  font-weight: normal;
  font-size: 96px;
  line-height: 1;
  text-transform: none;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  transform: scale(.25);
  transition: transform .3s cubic-bezier(.4,0,.2,1)
}
#divContent {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
#divContent.largeFonts .material-icons {
  transform: scale(1);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="testButton" type="button">Click to test</button>

<div id="divContent">
    <i class="material-icons">account_box</i>
    <i class="material-icons">computer</i>
</div>

I maintained the font-size at 96px for consistency and altered the icon size using transform. This results in smoother transitions (demonstrated), lighter load on the browser (even with multiple animated items), and crucially, ensures a consistent line-height across all states to prevent jumping of elements on the same line or below upon clicking the button.

Remember to use autoprefixing.

Using JavaScript, grammatically add material icons side by side

Answer №1

Answer №2

Similar questions

Tips for incorporating background-size and background-position within the background-image url()

Display an image tag using the site_url() function within PHP brackets

Tips on adding to Jquery html code while maintaining the current CSS styling

Issue: unrecognized symbol

The navigation bar scrolling based on mouse position lacks smoothness and could use some enhancement

Adjust the parent element to match the width of the child by utilizing the "display: grid" property

Are there any JS/jQuery plugins available for sliding animations that include slideLeft and slideRight functions, similar to the slideUp and slideDown functions?

Concealing a navigation tab with Angular4 in Typescript: A tutorial

Retrieving the body of a GET request using NodeJS and axios

Resolving cached CSS and JS files through the use of local storage

Using Javascript regex to capture the image name from a CSS file

Trigger ExtJS input file event when dialogue window is closed

Enhance your theme property in Styled Components by incorporating numerous style properties

Angular's Spanning Powers

Can integer values be stored in localStorage similar to JavaScript objects and retrieved without requiring typecasting?

Aligning two items to the right along the vertical axis, even if they have different heights (Bootstrap

The process of utilizing variables to form objects in ES6

Including onMouseUp and onMouseDown events within a JavaScript function

When using Selenium WebDriver to locate an object, an error may occur stating that the result of the xpath expression is "[object Text]" instead of an element as expected

How is it possible that this React setter is effectively working despite the fact that it is within a stale closure