删除 Material 图标和周围 div 之间的空间答案

【问题标题】：Remove space between Material icon and surrounding div删除 Material 图标和周围 div 之间的空间
【发布时间】：2020-09-08 04:18:55
【问题描述】：

我正在尝试移除我用作可拖动元素上的关闭图标的材质图标周围的环。

这是元素的图片（我已将背景更改为红色以突出问题），我想删除红色的外圈，以便元素的漂亮边框一直到边缘灰色圆圈：

这是元素和图标的 HTML 和 CSS：

HTML：

<div class="print-element">
  Tag Number
  <mat-icon class="resize-circle">highlight_off</mat-icon>
</div>

CSS：

.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: absolute;
    top: -10px;
    right: -10px;
    background-color: white;
    border: .1px solid white;
    border-radius: 50%;
    color: #aaa;
    cursor: pointer;
  }

.mat-icon {
    background-repeat: no-repeat;
    display: inline-block;
    fill: currentColor;
    height: 24px;
    width: 24px;
}

现在我可以更改 mat-icon 的大小，但结果如下：

使用：

.mat-icon {
    background-repeat: no-repeat;
    display: inline-block;
    fill: currentColor;
    height: 20px;
    width: 20px;
}

产量：

这是一个堆栈闪电战，一切就绪，准备就绪：https://stackblitz.com/edit/angular-m7wwvr?file=src%2Fstyles.scss

这是我想要的样子：

即使是指向正确方向的指针也会有所帮助。

【问题讨论】：

嗯，使用字体很棒的图标可以解决您的问题。你考虑过吗？或者你必须只使用material-icon。？因为我认为您使用的是 SVG 版本，并且您需要 font-version 来修复您的错误。
是的，我在整个应用程序中都使用了 material-icon，所以移动它会是一个巨大的变化。我可能会忍受边框不匹配而不是改成字体真棒。
我明白了。很公平。

标签： html css angular angular-material google-material-icons

【解决方案1】：

检查编辑后的 URL 以了解 HTML 和 CSS 的变化 https://stackblitz.com/edit/angular-m7wwvr-xrmyje?file=src/styles.scss

【讨论】：

【解决方案2】：

好的，这是一个答案。我使用@Srinivas Bendkhale 的答案来达到这个结果。

我所做的是用span 包裹icon 并修复hight 和width 然后我所要做的就是隐藏overflow 。

这就是它在我的浏览器中的外观。

.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>

【讨论】：