How can I eliminate the gaps in the exterior of Google's Material Design Icons?

Question

How can I eliminate the gaps in the exterior of Google's Material Design Icons?

Query: I've encountered difficulty in removing the whitespace around Google's Material Design icons, despite searching for solutions on Google and the Material Design icons guide. It's unclear whether the solution is simple and I'm overlooking it, or if there's a more complex reason for this seemingly straightforward task.

Below are excerpts from the relevant code in my project, or you can view the full project here.

My HTML markup:

<header class="primary-header first-header-column">
  <i class="material-icons primary-header-material-icon-first-menu">
    menu
  </i>
  <h1>
    <strong>
      Neocrypt
    </strong> 
    Network
  </h1>
  <nav class="primary-header-navigation">

  </nav>
</header>

Icon styling:

.material-icons.primary-header-material-icon-first-menu {
  color: var(--primary-typeface-color);
  font-size: 48px;
}

Heading styling:

.primary-header h1 {
  text-align: center;
  color: var(--primary-typeface-color);
  display: inline;
  font-family: var(--primary-typeface);
  font-size: 60px;
  line-height: 150px;
}

Referenced variables:

:root {
  --primary-typeface-color: #ffffff;
  --primary-typeface: 'Lato', sans-serif;
}

I'm aiming to have the icon sit directly beside the heading without any padding so I can adjust the spacing myself, like a reset. Despite attempting padding: 0px; and other solutions, the issue persists.

Note: I'm implementing Eric Meyer's "Reset CSS," which, as far as I know, shouldn't impact Google's Material Design icons.

Update (24/03/2018 01:33 UTC): It appears that Google adds the spacing around the icon within the image file itself, limiting users' control over that spacing. For those facing a similar challenge, I suggest exploring alternative icon fonts like Font Awesome.

html css material-design font-awesome reset

Answer 1

Answer №1

My approach was to enclose the icon within a span element and define fixed dimensions for it by setting a specific height and width. Then, I simply concealed the overflowing content.

This is the result displayed in my web browser. https://i.sstatic.net/3qkbb.png

Here's an illustration of how to eliminate the whitespace around the icon.

.print-element {
  min-width: 175px;
  min-height: 45px;
  border: solid 1px #ccc;
  color: rgba(0, 0, 0, 0.87);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #fff;
  border-radius: 4px;
  margin-right: 25px 25px 15px 0px;
  cursor: move;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  padding: 10px 50px 10px 10px;
  transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.resize-circle {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  border: .1px solid white;
  color: #aaa;
  cursor: pointer;
}

span {
  width: 20px;
  height: 20px;
  background: white;
  position: absolute;
  top: -7px;
  border-radius: 50%;
  right: -7px;
  overflow: hidden;
}

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


<div class="print-element">
  Tag Number
  <span><i class="material-icons resize-circle">highlight_off</i></span>
</div>

Answer 2

My approach was to enclose the icon within a span element and define fixed dimensions for it by setting a specific height and width. Then, I simply concealed the overflowing content.

This is the result displayed in my web browser. https://i.sstatic.net/3qkbb.png

Here's an illustration of how to eliminate the whitespace around the icon.

.print-element {
  min-width: 175px;
  min-height: 45px;
  border: solid 1px #ccc;
  color: rgba(0, 0, 0, 0.87);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #fff;
  border-radius: 4px;
  margin-right: 25px 25px 15px 0px;
  cursor: move;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  padding: 10px 50px 10px 10px;
  transition: box-shadow 200ms cubic-bezier(0, 0, 0.2, 1);
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.resize-circle {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  border: .1px solid white;
  color: #aaa;
  cursor: pointer;
}

span {
  width: 20px;
  height: 20px;
  background: white;
  position: absolute;
  top: -7px;
  border-radius: 50%;
  right: -7px;
  overflow: hidden;
}

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


<div class="print-element">
  Tag Number
  <span><i class="material-icons resize-circle">highlight_off</i></span>
</div>

Answer 3

Answer №2

To resolve this issue, I utilized a technique involving a negative margin. While effective, I must admit that the solution presented by Font Awesome is truly remarkable, echoing the sentiments of @Michael Burns.

When implementing the negative margin, the specific pixel value required will vary depending on the size and type of icon used. Nevertheless, it ensures consistency across different web browsers.

.material-icons.primary-header-material-icon-first-menu {
  margin-left: -2px;
}

Answer 4

To resolve this issue, I utilized a technique involving a negative margin. While effective, I must admit that the solution presented by Font Awesome is truly remarkable, echoing the sentiments of @Michael Burns.

When implementing the negative margin, the specific pixel value required will vary depending on the size and type of icon used. Nevertheless, it ensures consistency across different web browsers.

.material-icons.primary-header-material-icon-first-menu {
  margin-left: -2px;
}

Answer 5

Answer №3

If you're tired of manually removing padding from icons, fear not! I have developed a handy tool that can remove padding from all icons in a set with ease. While it does involve creating a new icon set, it can be a lifesaver: https://github.com/johndoe/IconPaddingRemover

Answer 6

If you're tired of manually removing padding from icons, fear not! I have developed a handy tool that can remove padding from all icons in a set with ease. While it does involve creating a new icon set, it can be a lifesaver: https://github.com/johndoe/IconPaddingRemover

How can I eliminate the gaps in the exterior of Google's Material Design Icons?

Answer №1

Answer №2

Answer №3

Similar questions

Why is there a mismatch between CSS and Angular 6 selector components?

Emphasize the content within the table cell

Is the form always being processed by onsubmit and confirm?

Interacting with HTML elements in Java programming

What is the best way to eliminate the white space between two sections?

Firefox triggers drag events while passing over a div scrollbar

Expanding containers with flexbox to allow for flexibility in size

Could LXML potentially determine the value of a class in HTML?

What's the best way to keep track of the number of objects I've created

What is the best way to hide the select arrow in an input-group using Bootstrap 4?

Retrieve the order in which the class names are displayed within the user interface

Alternating CSS Designs for Displaying Multiple Mysql Query Results

Issues with implementing Bootstrap 4 navbar on a Rails 5 application

Is there a way to activate the autoplay feature for this?

Ways to display the modal once the user initiates the action

Guide on creating a div container that spans the full width of the HTML page with a horizontal scrollbar

Is it possible to use cURL to open a particular frame and pass a parameter at the same time?

Manipulating content with JavaScript in Internet Explorer using the outerHTML property is a powerful

Increasing the size of the td element when including a new row

Tips for keeping an image stationary when hovering over it